A continuación te presento un curso completo y detallado de lenguaje HTML5: 


Lección 1 


Introducción a HTML5 


¿Qué es HTML? 
Novedades en HTML5 
Estructura básica de un documento HTML5 
Etiquetas HTML5 básicas 


Características de una página web moderna 


Lección 2 
Encabezados (h1-h6) 
Párrafos (p) 
Enlaces (a) 
Imágenes (img) 
Listas (ul, ol, li) 
Tablas (table, tr, td) 


Formularios (form, input, button) 


Lección 3: 


Etiquetas avanzadas de HTML5 


Elementos semánticos (header, nav, main, section, article, aside, footer) 
Audio y video (audio, video) 
Canvas 
Geolocalización (geolocation) 
Almacenamiento web (localStorage, sessionStorage) 


Drag and drop 


Lección 4 


Estilos en HTML5 


CSS y su relación con HTML5 
La etiqueta style 
La etiqueta link 
Selectores CSS 
Propiedades CSS 
Modelo de caja (box model) 
Lección 5 


Responsive design 


¿Qué es el diseño adaptable? 


Media queries 


Imágenes responsivas 
Flexbox 


Grid 


Lección 6 


Accesibilidad y SEO en HTML5 


¿Qué es la accesibilidad web? 
Atributos alt y title 
Etiquetas meta 
Etiquetas h1-h6 
Atributo lang 


Etiquetas semánticas 


Lección 7: 


Frameworks y herramientas 


¿Qué son los frameworks? 
Bootstrap 
Foundation 
Materialize 
SASS y LESS 


Herramientas para desarrollo web 


Lección 8: 


Introducción a JavaScript 


¿Qué es JavaScript? 
Variables y tipos de datos 
Operadores 
Estructuras de control 
Funciones 
Eventos 


Manipulación del DOM 


Lección 9 


Integración de HTML5, CSS y JavaScript 


¿Cómo se integran HTML5, CSS y JavaScript? 


Ejemplos prácticos de integración 


Lección 10 
Proyecto final 
Colores en HTML5 
Desarrollo de un sitio web completo utilizando HTML5, CSS y JavaScript 


Espero que este curso te sea útil y te ayude a aprender HTML5 de manera 
completa y detallada. ¡Buena suerte. 


html O Copy code 


<!DOCTYPE 

<html 

<head> 
<meta = > 
<title>Título de la pági 
<meta = 
<meta - 
<link - 

</head> 

<body> 


<h1>Título de la páginas 


<p>Este es un párrafo de 


HTML (Hypertext Markup Language) es un lenguaje de marcado que se utiliza 
para crear y diseñar páginas web. Consiste en un conjunto de etiquetas 
(también conocidas como “elementos”) que describen la estructura y el 
contenido de una página web. Estas etiquetas se utilizan para definir los 

elementos que componen la página, como el título, el encabezado, los párrafos, 
las imágenes, los enlaces, las tablas, los formularios y más. 


La mayoría de las etiquetas HTML tienen una etiqueta de apertura y una 
etiqueta de cierre, y el contenido se inserta entre ellas. Por ejemplo, la etiqueta 
de apertura para un párrafo es <p> y la etiqueta de cierre es </p>. El texto del 
párrafo se inserta entre estas dos etiquetas. 


A continuación se muestran algunos ejemplos de etiquetas HTML y su uso 
práctico: 


1. Etiqueta de encabezado (<h1> - <h6>): 


Se utilizan para definir los encabezados o títulos de una página web. Hay seis 
niveles de encabezado, que van desde el más grande (<h1>) hasta el más 
pequeño (<h6>). Por ejemplo, la siguiente etiqueta se utiliza para crear un 
encabezado de nivel 1: 


html 


Copy code 
<h1>Este es un encabezado de nivel 1</h1> 
2. Etiqueta de párrafo (<p>): 


Se utiliza para definir un párrafo de texto. Por ejemplo, la siguiente etiqueta se 
utiliza para crear un párrafo de texto: 


html 
Copy code 
3. Etiqueta de imagen (<img»): 


Se utiliza para insertar una imagen en una página web. La etiqueta de imagen 
no tiene una etiqueta de cierre, y en su lugar se utiliza un atributo src para 
especificar la ubicación de la imagen. Por ejemplo, la siguiente etiqueta se 

utiliza para insertar una imagen llamada “imagen.jpg” en la página: 


html 
Copy code 
4. Etiqueta de enlace (<a>): 


Se utiliza para crear un enlace a otra página web o a una sección específica de 
la misma página. El atributo href se utiliza para especificar la ubicación del 
enlace. Por ejemplo, la siguiente etiqueta se utiliza para crear un enlace a una 
página llamada “pagina.html”: 


html 


Copy code 


<a href="pagina.html”>Este es un enlace a otra página web</a> 


5. Etiqueta de lista (<ul>, <ol>, <li>): 


Se utilizan para crear listas de elementos. Hay dos tipos de lista: lista sin orden 
(<ul>) y lista ordenada (<ol>). Cada elemento de la lista se define con la 
etiqueta <li>. Por ejemplo, la siguiente etiqueta se utiliza para crear una lista 
sin orden con tres elementos: 


html 


Copy code 


Estos son solo algunos ejemplos de las etiquetas HTML que se pueden utilizar 
para diseñar una página web. Con HTML, es posible crear sitios web completos 
y complejos, que incluyen texto, 


HTMIL5 es la última versión del lenguaje HTML, que trae consigo una serie de 
nuevas funcionalidades y características. A continuación, se detallan algunas 
de las principales novedades en HTMIL5 y se presentan ejemplos prácticos de su 
uso: 


1. Elementos semánticos: HTML5 introduce una serie de nuevos elementos 
semánticos que permiten describir mejor el contenido de una página web. Estos 
elementos incluyen header, nav, main, article, section, aside, footer y más. Por 
ejemplo, el elemento header se utiliza para definir la cabecera de una página, y 
el elemento footer se utiliza para definir el pie de página. El siguiente ejemplo 
muestra cómo se utiliza el elemento header: 


html 


Copy code 


<li><a href="4">Inicio</a></li> 
<li><a href="+">Acerca de</a></li> 
<li><a href="H">Contacto</a></li> 


2. Audio y video nativos: HTML5 introduce elementos nativos para la 
reproducción de audio y video, lo que permite incluir contenido multimedia en 
una página web sin necesidad de utilizar plugins como Flash. Los elementos 
audio y video se utilizan para insertar archivos de audio y video en una página. 
Por ejemplo, el siguiente código inserta un archivo de video en la página: 


html 


Copy code 


3. Formularios mejorados: HTML5 introduce nuevas funcionalidades para la 
creación de formularios, como campos de búsqueda, campos de fecha, campos 
de correo electrónico y más. También se han mejorado las validaciones y 
restricciones en los campos de entrada. El siguiente ejemplo muestra cómo se 
utiliza el nuevo campo de entrada de correo electrónico: 


html 


Copy code 


<label for="correo”>Correo electrónico:</label> 
<input type="email” id="correo” name="correo” required> 


4. Canvas: HTML5 introduce el elemento canvas, que permite crear gráficos y 
animaciones de forma dinámica utilizando JavaScript. El siguiente ejemplo 
muestra cómo se utiliza el elemento canvas para dibujar un rectángulo rojo: 


html 
Copy code 


<canvas id="miCanvas” width="2007” height="200"></canvas> 


var canvas = document.getElementByld(“miCanvas”); 
var ctx = canvas.getContext(”2d”); 


ctx.fillStyle = “red”; 


ctx.fillRect(10, 10, 50, 50); 


5. Geolocalización: HTML5 permite obtener la ubicación del usuario a través del 


navegador, lo que permite crear aplicaciones web que utilizan la 
geolocalización. El siguiente ejemplo muestra cómo se utiliza la API de 
geolocalización para obtener la ubicación del usuario: 


html 
Copy code 


<button onclick="getLocation()”>Obtener ubicación</button> 
<p id="ubicacion”></p> 


El 


_ 


function showPosition(position) 


var ubicacion = “Latitud: “+ position.coords.latitude + “<br>Longitud: “+ 


La estructura básica de un documento HTML5 se compone de varias partes, 
que son necesarias para crear una página web correctamente estructurada y 
que sea compatible con los navegadores web modernos. A continuación se 
detallan las diferentes partes de la estructura básica de un documento HTML5, 
con ejemplos prácticos: 


1. Document Type Declaration (DTD): La primera línea de un documento 
HTML5 debe ser la declaración del tipo de documento (DTD), que le indica al 
navegador web qué versión de HTML se está utilizando. La declaración del tipo 
de documento para HTMILS5 es la siguiente: 


html 
Copy code 
<IDOCTYPE html> 


2. Elemento <html>: El elemento <html> es el contenedor principal de todo el 
contenido de la página web. Todos los demás elementos deben estar 
contenidos dentro del elemento <html>. Además, se utiliza el atributo lang 
para indicar el idioma de la página: 


html 


Copy code 


<html lang="es”> 


3. Elemento <head>: El elemento <head> se utiliza para incluir metadatos, 
como la descripción de la página, las palabras clave, la hoja de estilos y otros 
elementos que no se muestran en la página. Por ejemplo: 


html 


Copy code 


<meta charset="UTF-8”> 


<title>Título de la página</title> 


<meta name="description” content="Descripción de la página”> 


<meta name=”keywords” content=”palabras clave, separadas por comas”> 


<link rel="stylesheet” href="estilos.css”> 


4. Elemento <body>: El elemento <body> se utiliza para incluir todo el 
contenido visible de la página, como el texto, las imágenes, los videos, los 
formularios, etc. Por ejemplo: 


html 
Copy code 


<img src="imagen.jpg” alt="Descripción de la imagen”> 
</body> 


5. Comentarios: Los comentarios se utilizan para incluir notas y aclaraciones en 


el código HTML que no se muestran en la página web. Los comentarios se crean 
utilizando los caracteres <!-- y -->. Por ejemplo: 


html 


Copy code 


<!-- Este es un comentario en HTML --> 


Con estas cinco partes, se crea la estructura básica de un documento HTML5. A 
continuación, se muestra un ejemplo completo de un documento HTML 5, 
utilizando todas estas partes: 


html 
Copy code 
<IDOCTYPE html> 


<html lang="es”> 


<meta charset="UTF-8”> 


<title>Título de la página</title> 


<meta name=”"description” content="Descripción de la página”> 


<meta name=”keywords” content=”palabras clave, separadas por comas”> 


<link rel="stylesheet” href="estilos.css”> 


<h1>Título de la página</h1> 


<p>Este es un párrafo de ejemplo.</p> 


<img src="imagen.jpg” alt="Descripción de la imagen”> 


</form> 


</body> 


</html> 


Las etiquetas HTML5 básicas son las que se utilizan para estructurar el 
contenido de una página web. A continuación, se describen algunas de las 
etiquetas HTML5 más comunes y se presentan ejemplos prácticos de su uso. 


1. Etiqueta <h1> a <h6>: Las etiquetas de encabezado se utilizan para indicar 
los diferentes niveles de títulos y subtítulos de una página. La etiqueta <h1> se 
utiliza para el título principal de la página, mientras que las etiquetas <h2> a 
<h6> se utilizan para subtítulos. Por ejemplo: 


html 


Copy code 


<h1>Título principal</h1> 
<h2>Subtítulo 1</h2> 
<h3>Subtítulo 2</h3> 


2. Etiqueta <p>: La etiqueta <p> se utiliza para indicar un párrafo de texto. Por 
ejemplo: 


html 
Copy code 


<p>Este es un parrafo de ejemplo.</p> 


3. Etiqueta <img>: La etiqueta <img> se utiliza para insertar imágenes en una 
página web. Es importante incluir el atributo src para indicar la ubicación de la 
imagen y el atributo alt para proporcionar una descripción de la imagen. Por 
ejemplo: 


html 


Copy code 


<img src="imagen.jpg” alt="Descripción de la imagen”> 


4. Etiqueta <a>: La etiqueta <a> se utiliza para crear enlaces a otras páginas 
web o a secciones de la misma página. Es importante incluir el atributo href 
para indicar la ubicación del enlace. Por ejemplo: 


html 
Copy code 


<a href="https://www.ejemplo.com”>Enlace a otra página web</a> 


<a href="Hseccion”>Enlace a una sección de la misma página</a> 


5. Etiqueta <ul> y <li>: Las etiquetas <ul> y <li> se utilizan para crear listas sin 
ordenar. La etiqueta <ul> indica el inicio de la lista y cada elemento de la lista 
se indica con la etiqueta <li>. Por ejemplo: 


html 


Copy code 


6. Etiqueta <ol> y <li>: Las etiquetas <ol> y <li> se utilizan para crear listas 
ordenadas. La etiqueta <ol> indica el inicio de la lista y cada elemento de la 
lista se indica con la etiqueta <li>. Por ejemplo: 


html 


Copy code 


7. Etiqueta <table>, <tr>, <th> y <td>: Las etiquetas <table>, <tr>, <th> y <td> 
se utilizan para crear tablas. La etiqueta <table> indica el inicio de la tabla, la 
etiqueta <tr> indica una fila, la etiqueta <th> se utiliza para encabezados de 
columna y la etiqueta <td> se utiliza para el contenido de la tabla. Por ejemplo: 


html 


Copy code 


Las características de una página web moderna son aquellas que ofrecen una 
experiencia de usuario más interactiva y atractiva. A continuación, se describen 
algunas de las características más importantes: 


1. Diseño responsivo: Una página web moderna debe tener un diseño 
responsivo, lo que significa que debe adaptarse automáticamente al tamaño de 
la pantalla en la que se visualiza. Esto es especialmente importante hoy en día, 

ya que la mayoría de las personas utilizan dispositivos móviles para navegar 
por Internet. Por ejemplo, la página web de Amazon tiene un diseño responsivo 
que se adapta automáticamente al tamaño de la pantalla del dispositivo. 


2. Interactividad: Las páginas web modernas deben ser interactivas y permitir a 
los usuarios interactuar con el contenido de la página de diversas maneras. 
Esto puede incluir la capacidad de realizar búsquedas, comentar, calificar, 
compartir en redes sociales, y más. Por ejemplo, la página web de Airbnb 
permite a los usuarios buscar alojamiento y reservar habitaciones, así como 
calificar y comentar sobre su experiencia. 


3. Velocidad de carga rápida: Una página web moderna debe cargarse 
rápidamente, lo que significa que los tiempos de carga deben ser lo más cortos 
posible. Esto es importante porque los usuarios esperan una experiencia rápida 

y fluida en la web. Por ejemplo, la página web de Google tiene un tiempo de 
carga rápido que permite a los usuarios acceder rápidamente a los resultados 
de búsqueda. 


4. Diseño atractivo: Una página web moderna debe tener un diseño atractivo 
que sea fácil de navegar y visualmente agradable. Esto incluye el uso de colores 
atractivos, fuentes legibles y diseños limpios. Por ejemplo, la página web de 


Apple tiene un diseño atractivo y limpio que utiliza colores blancos y negros con 
líneas elegantes y una tipografía moderna. 


5. Multimedia: Las páginas web modernas deben incluir contenido multimedia, 
como imágenes, videos y animaciones, para mejorar la experiencia del usuario. 
Esto puede ayudar a aumentar el interés y la participación de los usuarios. Por 
ejemplo, la página web de National Geographic incluye imágenes 
impresionantes de la naturaleza y los animales, así como videos y animaciones 
interactivas para mostrar el mundo de manera más completa. 


6. Seguridad: Una página web moderna debe ser segura y proteger la 
información del usuario. Esto puede incluir el uso de certificados SSL y medidas 
de seguridad para evitar ataques cibernéticos y el robo de información. Por 
ejemplo, la página web de Facebook utiliza el protocolo HTTPS y el cifrado de 
extremo a extremo para garantizar la seguridad de la información de sus 
usuarios. 


En resumen, una página web moderna debe ser responsiva, interactiva, rápida, 


atractiva, incluir multimedia y ser segura para brindar la mejor experiencia 
posible al usuario. 


La estructura gráfica de las características de una página web moderna podría 
verse así: 


diff 


Copy code 


| Diseño responsivo |] 


/ Interactividad |] 


| Velocidad de carga |] 


/ Diseño atractivo |] 


Y el código HTML correspondiente para representar esta estructura podría ser 
el siguiente: 


php 


Copy code 


<html> 


<title>Características de una página web moderna</title> 


¡<body> 


<body> 


<htmi> 
ful 


</ul> 


<!DOCTYPE html> 


En este ejemplo, se utiliza la etiqueta ul para crear una lista no ordenada de las 
características de una página web moderna. Cada elemento de la lista se 
representa con la etiqueta li. Ademós, se utiliza la etiqueta h1 para agregar un 
encabezado a la página. 


Los encabezados son etiquetas HTML que se utilizan para definir los títulos y 
subtítulos de una página web. Los encabezados se representan con las 
etiquetas h1 a h6, siendo h1 el encabezado más grande y h6 el más pequeño. A 
continuación, se describen las etiquetas de encabezado y se proporcionan 
ejemplos prácticos de su uso: 


h1: 


La etiqueta h1 se utiliza para el encabezado principal de una página web. Debe 
usarse solo una vez en la página y es el encabezado más grande. Ejemplo: 


html 


Copy code 


<h1>Bienvenidos a mi página web</h1> 


h2: 


La etiqueta h2 se utiliza para los encabezados secundarios en la página. 
Pueden haber varios h2 en una página. Ejemplo: 


HTML 


Copy code 


<h2>Nuestros servicios</h2> 


h3: 


La etiqueta h3 se utiliza para los encabezados de sección. Son más pequeños 
que h2 y se utilizan para subdividir una sección. Ejemplo: 


html 


Copy code 


<h3>Redes sociales</h3> 


ha: 


La etiqueta h4 se utiliza para los encabezados de subsección. Son más 
pequeños que h3 y se utilizan para subdividir aún más una sección. Ejemplo: 


html 


Copy code 


<h4>Facebook</h4> 


h5: 


La etiqueta h5 se utiliza para los encabezados de sub-subsección. Son más 
pequeños que h4 y se utilizan para subdividir aún más una sección. Ejemplo: 


html 


Copy code 


<h5>Comentarios de los usuarios</h5> 


h6: 


La etiqueta hé6 se utiliza para los encabezados de sub-sub-subsección. Son más 
pequeños que h5 y se utilizan para subdividir aún más una sección. Ejemplo: 


html 


Copy code 


<h6>Respuestas a los comentarios</h6> 


Es importante tener en cuenta que los encabezados no solo se utilizan para 
mejorar la estructura y organización de una página web, sino que también son 
importantes para el SEO (Search Engine Optimization), ya que los motores de 
búsqueda utilizan los encabezados para determinar la relevancia del contenido 
de una página. Por lo tanto, es recomendable utilizar los encabezados de 
manera adecuada y jerárquica para mejorar tanto la estructura de la página 
como su posicionamiento en los motores de búsqueda. 


La etiqueta HTML p se utiliza para crear un párrafo de texto en una página web. 
Esta etiqueta es muy útil para separar y organizar el contenido de una página 
en secciones de texto, haciendo que la información sea más fácil de leer y 
comprender para el usuario. 


A continuación, se presenta un ejemplo práctico de cómo utilizar la etiqueta p 
en HTML: 


html 


Copy code 


<!DOCTYPE html> 


<body> 


<body> 
<h1>Mi página web</h1> 


<p>Este es un párrafo de ejemplo en el que se puede escribir cualquier tipo de 
texto. Los párrafos se pueden utilizar para separar el contenido de una página 


st. 


en secciones legibles y fáciles de entender.</p> 


<p>Los párrafos también se pueden utilizar para presentar diferentes ideas o 


argumentos en un formato fácil de leer y seguir. Además, los párrafos pueden 


tener diferentes estilos, como negrita, cursiva o subrayado, para resalta 
ciertos puntos clave.</p> 


En este ejemplo, se utiliza la etiqueta p para crear dos párrafos diferentes en el 
cuerpo de la página. Los párrafos están rodeados por las etiquetas de apertura 
y cierre de p y se separan del encabezado h1 mediante un salto de línea. 


Cada párrafo puede contener cualquier tipo de texto, incluyendo palabras, 
frases, oraciones y párrafos completos. Los párrafos también se pueden utilizar 
para separar diferentes secciones de contenido en una página web, como los 
encabezados, las imágenes y los enlaces. 


Es importante tener en cuenta que los párrafos no solo son importantes para la 
organización del contenido de una página web, sino que también son 
importantes para la accesibilidad y la usabilidad, ya que los usuarios pueden 
leer y comprender mejor el contenido de la página si está bien organizado en 
párrafos legibles y fáciles de seguir. 


La etiqueta HTML a se utiliza para crear un enlace o hipervínculo a otra página 
web, archivo, imagen u otro recurso en línea. Los enlaces son una parte 
fundamental de la web, ya que permiten a los usuarios navegar entre 

diferentes páginas y sitios web de manera fácil y rápida. 


A continuación, se presenta un ejemplo práctico de cómo utilizar la etiqueta a 
en HTML: 


html 


Copy code 


<body> 


<body> 


<h1>Mi página web</h1> 


<p>Este es un párrafo de ejemplo en el que se puede agregar un enlace a otra 


A . 


página web. Aquí hay un enlace a la página de <a 
href="https://www.google.com”>Google</a>.</p> 


En este ejemplo, se utiliza la etiqueta a para crear un enlace a la página de 
Google. La etiqueta a tiene un atributo href, que especifica la dirección URL del 
recurso al que se desea enlazar. En este caso, el valor del atributo href es 
“https://www.google.com”, que es la dirección de la página de Google. 


El texto del enlace se encuentra entre las etiquetas de apertura y cierre de a. En 
este ejemplo, el texto del enlace es “Google”. Cuando un usuario hace clic en 
este enlace, se abrirá la página de Google en una nueva pestaña o ventana del 
navegador. 


También es posible utilizar la etiqueta a para crear enlaces a otros recursos en 
línea, como imágenes y archivos de audio o video. Por ejemplo, se podría 
utilizar la etiqueta a para crear un enlace a una imagen de la siguiente manera: 


html 


Copy code 


<a href="ruta/a/la/imagen.jpg”><img src="ruta/a/la/imagen.jpg” 


alt="Descripción de la imagen”></a> 


En este caso, la etiqueta a envuelve a la etiqueta img, lo que permite que la 


imagen sea enlazada a otra página web o recurso en línea. 


En resumen, la etiqueta a es una herramienta poderosa para crear enlaces 
entre diferentes recursos en línea. Los enlaces son esenciales para la 
navegación y la exploración de la web, y son una parte fundamental del diseño 
y la funcionalidad de cualquier página web. 


La etiqueta HTML ¡img se utiliza para insertar imágenes en una página web. Las 
imágenes son una parte importante del diseño y la estética de cualquier sitio 
web, y pueden utilizarse para transmitir información, crear interés visual o 
simplemente decorar la página. 


A continuación, se presenta un ejemplo práctico de cómo utilizar la etiqueta 
img en HTML: 


html 


Copy code 


<!DOCTYPE html> 


<img src=”"ruta/a/la/imagen.jpg” alt="Gato”> 
</body> 


En este ejemplo, se utiliza la etiqueta img para insertar una imagen de un gato 


en la página. La etiqueta img tiene un atributo src, que especifica la ubicación 
de la imagen. En este caso, el valor del atributo src es “ruta/a/la/imagen.jpg”, 
que es la ubicación de la imagen en el servidor web. 


La etiqueta img también tiene un atributo alt, que proporciona un texto 
alternativo para la imagen en caso de que no se pueda mostrar por algún 
motivo. El texto alternativo es importante para la accesibilidad web, ya que 
permite a los usuarios con discapacidades visuales entender el contenido de la 
imagen. 


Es importante tener en cuenta que las imágenes pueden tardar en cargar, lo 
que puede ralentizar el rendimiento de la página web. Para evitar esto, se 
recomienda optimizar las imágenes antes de subirlas al servidor, reduciendo su 
tamaño y resolución sin comprometer la calidad visual. 


También es posible utilizar la etiqueta img para crear imágenes enlazadas, 
como se mostró en el ejemplo anterior de la etiqueta a. En este caso, la 
etiqueta a envuelve a la etiqueta img, lo que permite que la imagen sea 

enlazada a otra página web o recurso en línea. 


En resumen, la etiqueta img es una herramienta importante para la creación de 
páginas web visualmente atractivas y atractivas. Las imágenes pueden 
utilizarse para transmitir información, crear interés visual y mejorar la 

accesibilidad web. 


Las listas son un elemento común en las páginas web, y permiten organizar la 
información de manera estructurada y fácil de leer. En HTML, existen tres tipos 
de listas: las listas sin ordenar (ul), las listas ordenadas (ol) y las listas de 
definición (dl). 


Listas sin ordenar (ul) 


Las listas sin ordenar se utilizan para enumerar elementos sin una secuencia 
específica. En este tipo de lista, los elementos se presentan con viñetas por 
defecto. 


html 


Copy code 


En este ejemplo, se utiliza la etiqueta ul para crear una lista sin ordenar, que 
contiene tres elementos (li). Cada elemento se presenta con una viñeta por 
defecto. 


Listas ordenadas (ol) 


Las listas ordenadas se utilizan para enumerar elementos en una secuencia 
específica. En este tipo de lista, los elementos se presentan con números por 
defecto. 


html 


Copy code 


En este ejemplo, se utiliza la etiqueta ol para crear una lista ordenada, que 
contiene tres elementos (li). Cada elemento se presenta con un número por 
defecto. 


Listas de definición (dl) 


Las listas de definición se utilizan para enumerar términos y sus definiciones. En 
este tipo de lista, cada término se presenta en negrita, y su definición se 
presenta debajo. 


html 
Copy code 


En este ejemplo, se utiliza la etiqueta dl para crear una lista de definición, que 
contiene tres pares de términos (dt) y definiciones (da). 


En resumen, las listas son una herramienta importante para organizar la 
información en una página web de manera estructurada y fácil de leer. HTML 
proporciona tres tipos de listas: las listas sin ordenar (ul), las listas ordenadas 

(ol) y las listas de definición (dl). Cada tipo de lista se utiliza de manera 
diferente, y es importante seleccionar el tipo adecuado según el contenido que 
se desea presentar. 


Las tablas son una forma común de presentar información en una página web. 

En HTML, se utilizan tres etiquetas principales para crear una tabla: table, tr y 

td. La etiqueta table define la tabla en sí misma, la etiqueta tr define cada fila 
de la tabla, y la etiqueta td define cada celda de la tabla. 


Creación de una tabla básica 
html 


Copy code 


<td>Nombre</td> 
<td>Edad</td> 
<td>Ciudad</td> 
<td>25</td> 

< 


<td>Madrid</td> 


<tr> 


/t 
tr 
/t 


<td>Pablo</td> 
<td>30</td> 
<td>Barcelona</td> 


r> 

> 
<td>María</td> 
r> 


En este ejemplo, se utiliza la etiqueta table para crear la tabla. Dentro de la 
tabla, se utilizan tres etiquetas tr para definir cada fila. Dentro de cada fila, se 
utilizan las etiquetas td para definir cada celda. El resultado es una tabla que 

muestra el nombre, la edad y la ciudad de dos personas diferentes. 


Agregar encabezados a la tabla 
html 
Copy code 


En este ejemplo, se utiliza la etiqueta thead para definir los encabezados de la 
tabla. Los encabezados se definen dentro de una fila tr utilizando la etiqueta th 
en lugar de la etiqueta td. Además, se utiliza la etiqueta tbody para definir el 
cuerpo de la tabla, que contiene las filas de datos. El resultado es una tabla con 
encabezados claros que facilitan la lectura de los datos. 


Agregar bordes a la tabla 
html 
Copy code 


<table border="1"> 


En este ejemplo, se utiliza el atributo border en la etiqueta table para agregar 
bordes a la tabla. El valor 1 indica que se debe agregar un borde de 1 píxel 
alrededor de cada celda. El resultado es una tabla con bordes que la hacen más 
fácil de distinguir del resto del contenido de la página. 


En resumen, las tablas son una herramienta útil para presentar información en 
una página web de manera organizada y fácil de leer. En HTML, se utilizan tres 
etiquetas principales para 


Los formularios son una parte integral de muchas páginas web modernas, ya 

que permiten a los usuarios enviar información a través de la página web. En 

HTML5, los formularios se crean utilizando las etiquetas form, input y button, 
entre otras. 


La etiqueta form es utilizada para definir un formulario. Puede tener varios 
atributos, como action, que especifica la URL a la que se enviará el formulario 
una vez que se envíe, y method, que especifica el método HTTP utilizado para 

enviar el formulario. Los dos valores comunes para el atributo method son “GET” 
y “POST”. 


La etiqueta input es utilizada para crear varios tipos de campos de entrada, 
como campos de texto, botones de radio, casillas de verificación, etc. El 
atributo type se utiliza para especificar el tipo de campo de entrada que se va a 
crear. Algunos de los valores comunes para el atributo type son: 


text: para campos de texto de una sola línea 
password: para campos de contraseña 
checkbox: para casillas de verificación 
radio: para botones de radio 
submit: para botones de envío de formulario 


La etiqueta button se utiliza para crear un botón dentro del formulario. Puede 
tener varios atributos, como type, que especifica el tipo de botón, como 


Y M4 
,/ 


“submit”, “reset” o “button”, y name y value, que se utilizan para enviar 


información adicional junto con el formulario. 


Ejemplo de código de un formulario básico: 


html 


Copy code 


<form action="submit.php” method="POST”> 


<label for="name”>Nombre:</label> 


<input type="text” ¡id="name” name="name”><br> 


<label for="email”>Correo electrónico:</label> 


<input type="email” ¡d="email” name="email"><br> 


<label for="message”>Mensaje:</label> 


<textarea id="message” name="message”></textarea><br> 


<input type="submit” value="Enviar”> 


En este ejemplo, hemos creado un formulario que incluye tres campos: un 
campo de texto para el nombre, un campo de correo electrónico y un área de 
texto para el mensaje. También hemos agregado un botón de envío de 
formulario. Cuando el usuario envía el formulario, se enviará a “submit.php” 
utilizando el método POST. 


En HTML5, se introdujeron nuevos elementos semánticos para ayudar a 
estructurar el contenido de una página de manera más significativa. Los 
elementos semánticos son aquellos que indican claramente el propósito y la 
estructura de cada sección del contenido de una página, lo que facilita la 
comprensión tanto para los humanos como para los motores de búsqueda. 


A continuación se detallan algunos de los elementos semánticos más comunes: 


<header>: este elemento se utiliza para el encabezado de una página o sección, 
como la barra de navegación, el logotipo o el título principal de la página. 


html 


Copy code 


<h1>Mi sitio web</h1> 


<ul> 
<li><a href="4">Inicio</a></li> 


<li><a href="H">Acerca de</a></li> 


<li><a href="H">Contacto</a></li> 


<nav>: este elemento se utiliza para el bloque de navegación de una página, 
como los menús de navegación principal y secundario. 


html 
Copy code 


<main>: este elemento se utiliza para la sección principal del contenido de una 
página. 


html 


Copy code 


<main»> 
<section> 


<h2>Introducción</h2> 


<p>Bienvenido a mi sitio web. Aquí encontrarás información sobre...</p> 


<section>: este elemento se utiliza para dividir el contenido de una página en 


> 
<li>Servicio 1</li> 


secciones. 
html 


Copy code 


<section> 


<article>: este elemento se utiliza para contenido autónomo, como un artículo, 
una publicación de blog o una noticia. 


html 


Copy code 


<aside>: este elemento se utiliza para contenido secundario, como barras 
laterales, publicidad o información adicional. 


html 


Copy code 


<h3>Enlaces relacionados</h3> 
<li><a href="+4">Enlace 1</a></li> 


<li><a href="4">Enlace 2</a></li> 
<li><a href="4">Enlace 3</a></li> 
<footer>: este elemento se utiliza para el pie de página de una página. 
html 


Copy code 


<p>Derechos de autor O </p> 


html O Copy code 


<div 
<video 
<source 
<source 
Your browser 
</video> 


</div> 


HTML5 permite la inclusión de audio y vídeo en las páginas web de manera 
sencilla, utilizando las etiquetas <audio> y <video>. Estas etiquetas permiten 
especificar la fuente del audio o vídeo, así como los controles que se mostrarán 
al usuario, como el botón de reproducción y el volumen. 


La etiqueta <audio> se utiliza para insertar audio en una página web. Al igual 
que con la etiqueta <img>, se debe especificar el atributo src para indicar la 
ruta del archivo de audio. Además, se pueden agregar otros atributos para 

especificar el tipo de archivo de audio (type), el título (title), la descripción 


(description) y el autor (author). También se pueden incluir etiquetas de control, 
como <source> para agregar múltiples fuentes de audio, y <track> para 
agregar subtítulos. 


Un ejemplo de uso de la etiqueta <audio> podría ser el siguiente: 


CSS 


Copy code 


<audio src="cancion.mp3” controls> 
Tu navegador no soporta la etiqueta audio. 
</audio> 


En este ejemplo, se especifica la ruta del archivo de audio cancion.mp3 
utilizando el atributo src. La etiqueta controls indica que se deben mostrar los 
controles de reproducción, como el botón de reproducción y el volumen. El 
texto “Tu navegador no soporta la etiqueta audio.” se mostrará en 
navegadores que no sean compatibles con la etiqueta <audio>. 


La etiqueta <video> se utiliza de manera similar a la etiqueta <audio>, pero 
para la inserción de vídeo. Al igual que con la etiqueta <audio>, se debe 
especificar el atributo src para indicar la ruta del archivo de vídeo. También se 
pueden agregar otros atributos para especificar el tipo de archivo de vídeo 
(type), el título (title), la descripción (description) y el autor (author). Además, 
se pueden incluir etiquetas de control, como <source> para agregar múltiples 
fuentes de vídeo, y <track> para agregar subtítulos. 


Un ejemplo de uso de la etiqueta <video> podría ser el siguiente: 


CSS 


Copy code 


<video src="video.mp4” controls> 
Tu navegador no soporta la etiqueta video. 
</video> 


En este ejemplo, se especifica la ruta del archivo de vídeo video.mp4 utilizando 
el atributo src. La etiqueta controls indica que se deben mostrar los controles 
de reproducción, como el botón de reproducción y el volumen. El texto “Tu 
navegador no soporta la etiqueta video.” se mostrará en navegadores que no 
sean compatibles con la etiqueta <video>. 


Reproductor De Vdeos 


Para crear un reproductor de vídeo en una página web, se pueden utilizar las 
etiquetas <video> y <source>, así como CSS y JavaScript para personalizar su 
apariencia y comportamiento. A continuación, se presenta un ejemplo de cómo 
crear un reproductor de vídeo utilizando HTML5, CSS y JavaScript. 


Primero, se debe crear la estructura HTML básica para el reproductor de vídeo: 
html 
Copy code 


<source src="video.mp4” type="video/mp4”> 


<source src="video.webm” type="video/webm”> 


Your browser does not support HTMLS5 video. 


En este código, se crea un contenedor <div> con la clase “video-player”, que 
será el contenedor para el reproductor de vídeo. Dentro de este contenedor, se 
agrega la etiqueta <video> con el atributo controls, que muestra los controles 
de reproducción. Se agregan dos etiquetas <source> con las rutas de los 
archivos de vídeo, una en formato MP4 y otra en formato WebM. También se 
agrega un mensaje de error que se mostrará en navegadores que no sean 
compatibles con HTML5 video. 


A continuación, se puede utilizar CSS para personalizar la apariencia del 
reproductor de vídeo. Por ejemplo: 


CSS 


Copy code 


video-player 
width: 640px; 


width: 100%; 


En este código, se define un ancho de 640 píxeles para el contenedor del 
reproductor de vídeo, y se centra horizontalmente utilizando margin: O auto;. 
Ademós, se establece que el ancho del vídeo debe ser del 100% del ancho del 

contenedor, y su altura debe ser automática para mantener la relación de 

aspecto del vídeo. 


Finalmente, se puede agregar JavaScript para personalizar el comportamiento 
del reproductor de vídeo. Por ejemplo, se puede agregar código para hacer que 
el reproductor se reproduzca automáticamente al hacer clic en el botón de 
reproducir, y se detenga automáticamente al hacer clic en el botón de pausa. El 
código podría verse así: 


javascript 


Copy code 


var video = document.querySelector('video”); 
var playButton = document.querySelector(”.play-button”); 
olayButton.addEventListener('click”, function() 
if (video.paused) 


playButton.innerHTML = “Play”; 


video. play(); 
playButton.innerHTML = “Pause”; 


En este código, se selecciona el elemento <video> y el botón de reproducción 
utilizando document.querySelector(). Luego, se agrega un evento de clic al 
botón de reproducción, que verifica si el vídeo está en pausa o en reproducción 
y actúa en consecuencia. 


Con estos pasos, se puede crear un reproductor de vídeo básico utilizando 
HTML5, CSS y JavaScript. A partir de aquí, se pueden agregar más 
características y personalización según sea necesario. 


Para crear un reproductor de videos en HTML5 con una lista de videos debajo, 
puedes seguir los siguientes pasos: 


Crear una estructura HTML básica para el reproductor de video, que incluya un 
contenedor para el reproductor principal y un elemento para la lista de videos: 


html 
Copy code 
<div class="video-player”> 
<video src="video1.mp4” controls></video> 
<ul class="video-list”> 
<li><a href="video1.mp4”>Video 1</a></li> 
<li><a href="video2.mp4”>Video 2</a></li> 


<li><a href="video3.mp4”>Video 3</a></li> 


Estilizar la estructura HTML con CSS para que tenga un aspecto agradable: 
CSS 
Copy code 
) 


padding: O 


.video-list li 


margin-bottom: 10px 


20; 
margin: 0; 


video-list li a 
padding: 5px 
background-color: fteee 
color: 4333; 


Agregar código JavaScript para que los videos de la lista se reproduzcan en el 


display: block; 


reproductor principal cuando se haga clic en ellos: 
javascript 
Copy code 


const videoPlayer = document. querySelector(”.video-player video”); 


const videoList = document. querySelectorAll(”.video-list li a?); 


or (let ¡ = 0; ¡< videoList.length; i++) 


videoList[i]. addEventListener('click”, function(e) 


videoPlayer.setAttribute('src”, videoSrc); 
videoPlayer. play(); 
Y» 
) 


Este código utiliza el método querySelector para seleccionar el elemento de 
video principal y querySelectorAll para seleccionar todos los elementos de video 
en la lista. Luego, se agrega un evento de clic a cada elemento de la lista que 
cambia el atributo src del video principal y lo reproduce. 


“EJEMPLO DE COMO QUEDARÍA” 


Code: 


<div class="video-player”> 


<video src="https://cdn-cf.vidyard.com/uploads/3367874/govideo/874a1f80- 
7cff-11ed-acas- 


475650bb6456.mp4?PSzeUgfkawSKr_9aFQ8BAYU8Iz5qiWMIpZLJv5CgWSxrjYG 
t29soZEJ-1xjQ50xbVO_b5hMwWm1S_7211- 


1jixofH200Zf01_178mVcq0EomZOh_XLMw” controls></video> 


<ul class="video-list”> 


<li><a href="https://cdn- 


cf.vidyard.com/uploads/3367515/g0video/32bfa760-7cd6-11ed-970e- 


1</a></li> 


<li><a href="https://cdn.vidyard.com/uploads/3367874/govideo/f0f99840- 


3PKlyi5RSU5QRgX5AbTIgOnIgabLOL3pQ5uJthwxbGvS52CipjINUKDeY2vMSo6H 
7irmq0”>Video 2</a></1i> 


cf.vidyard.com/uploads/3367515/g0video/57ae3b10-7ce3-11ed-9141- 


OYQXXREg”>Video 3</a></li> 


<li><a href="https://cdn- 


<h1 style="background-color: gold”> $2</h1> 


<img 


rc=”"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOApU1n 


kKEV_184MZKRulhgXx9UAudegUr/s320/20220525 162223 copy 320x320.pn 


background-color: black; 


.video-player 


max-width: 640px 


list-style: none 
padding: O 


.video-list li 


margin-bottom: 10px 


margin: 0; 
background-color: feee; 


text-decoration: none; 


ZA 
? 
? 
, 
ZA 
A 


const videoPlayer = document. querySelector(”.video-player video”); 


const videoList = document. querySelectorAll(”. video-list li a?); 


or (let ¡ = 0; ¡< videoList.length; i++) 


videoList[i]. addEventListener('click”, function(e) 


videoPlayer.setAttribute('src” 
videoPlayer. play(); 
1); 


, videoSrc); 


Con estos pasos, tendrás un reproductor de video en HTML5 con una lista de 
videos debajo que se pueden reproducir en el reproductor principal al hacer clic 
en ellos. 


El elemento canvas de HTML5 permite a los desarrolladores web crear gráficos 
y animaciones complejas utilizando JavaScript. En resumen, el canvas es una 
superficie de dibujo rectangular que se encuentra en el documento HTML y que 
se puede programar con JavaScript para generar gráficos, animaciones, juegos 
y aplicaciones interactivas. 


El canvas es un elemento de línea que no muestra nada por sí solo, por lo que 
se requiere de JavaScript para dibujar en él. Para crear un canvas, se usa la 
etiqueta <canvas>, la cual se debe agregar en el documento HTML. 


html 
Copy code 
</IDOCTYPE html> 
<html> 


<title>Ejemplo Canvas</title> 


<body> 


<canvas id="miCanvas”></canvas>» 


El canvas también requiere de una fuente de dibujo, que puede ser una imagen, 
una textura o simplemente un color sólido. Para configurar la fuente de dibujo 


en un canvas, se puede usar el método getContext() en JavaScript y especificar 
el tipo de contexto que se desea utilizar (2D o 3D). 


javascript 
Copy code 
const ctx = miCanvas.getContext('2d”); 


El contexto 2D es el más común y permite dibujar líneas, formas, texto, 
imágenes y aplicar efectos de estilo. Para dibujar en un canvas, se pueden 
utilizar diferentes métodos del objeto context, como por ejemplo: 


fillRect(x, y, width, height): dibuja un rectángulo sólido en el canvas. 
strokeRect(x, y, width, height): dibuja un borde rectangular en el canvas. 
clearRect(x, y, width, height): borra una sección rectangular del canvas. 
beginPath(): comienza un nuevo camino de dibujo. 
moveTo(x, y): mueve el punto de dibujo a la posición (x, y). 
lineTo(x, y): dibuja una línea desde la posición actual hasta la posición (x, y). 
stroke(): dibuja el borde de la figura actual. 
fill(): dibuja la figura actual con el color de relleno especificado. 
drawlmage(image, x, y): dibuja una imagen en el canvas. 


A continuación, se muestra un ejemplo sencillo que dibuja un rectángulo en un 
canvas: 


html 


Copy code 


<body> 


<canvas id="miCanvas”></canvas>» 


const miCanvas = document.getElementByld(“miCanvas”); 
const ctx = miCanvas.getContext('2d”); 


ctx.fillStyle = Hf00”; 


ctx.fillRect(10, 10, 100, 100); 


En este ejemplo, se crea un canvas y se obtiene el contexto 2D. Luego, se 


configura el color de relleno (fillStyle) en rojo y se dibuja un rectángulo sólido 
en la posición (10, 10) con un ancho de 100 píxeles y una altura de 100 píxeles. 


¿all (59): 4 


= “€ HTML Colors 
Navy ++000080 rgb(0, O, 128) 


Fuchsia HEOOFf rgb(255, O, 255) 


++800080 rgb(128, 0, 128) 


HTML Color Picker 


Click the button below to pick a color. 


008080 
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La geolocalización es una característica de HTML5 que permite a los 
navegadores web obtener la ubicación física del usuario, siempre y cuando el 
usuario haya otorgado permiso para ello. Esto se logra a través del API de 
Geolocalización, que se puede acceder mediante JavaScript. 


Para acceder a la ubicación del usuario, el navegador utiliza diversas 
tecnologías, como GPS, Wi-Fi, Bluetooth y la dirección IP, dependiendo de lo 
que esté disponible en el dispositivo del usuario. 


Para utilizar la geolocalización en una página web, primero debemos 
comprobar si el navegador del usuario es compatible con la API de 
Geolocalización. Esto se puede hacer mediante el siguiente código JavaScript: 


perl 
Copy code 


if (navigator.geolocation) 


// El navegador es compatible con la API de Geolocalización 
// El navegador no es compatible con la API de Geolocalización 


Una vez que hemos comprobado que el navegador es compatible, podemos 
utilizar el método getCurrentPosition() del objeto navigator.geolocation para 
obtener la ubicación actual del usuario. Este método acepta dos funciones de 
devolución de llamada (callback): una función que se ejecuta si la ubicación se 

obtiene correctamente, y otra función que se ejecuta si se produce un error. 


javascript 


Copy code 


¿ function(error) 
5»); 
j 


También podemos utilizar el método watchPosition() si queremos seguir la 
ubicación del usuario en tiempo real. Este método también acepta dos 
funciones de devolución de llamada, una para cuando se obtiene la ubicación 
correctamente y otra para cuando se produce un error. 


javascript 
Copy code 


if (navigator.geolocation) 


var watchld = navigator.geolocation.watchPosition(function(position) 


// La ubicación se ha actualizado correctamente 
// position.coords.latitude contiene la latitua 


// position.coords.longitude contiene la longituoa 


¿ function(error) 


// Se ha producido un error al obtener la ubicación 
»; 


También podemos especificar opciones adicionales, como la precisión deseada 
y el tiempo máximo permitido para obtener la ubicación. 


En resumen, la geolocalización es una característica útil de HTML5 que permite 
a los desarrolladores web obtener la ubicación física del usuario y proporcionar 
contenido personalizado basado en su ubicación. 


El almacenamiento web es una forma de almacenar datos localmente en el 
navegador del usuario. Los dos métodos principales de almacenamiento web 
en HTML5 son localStorage y sessionStorage. Ambos permiten almacenar datos 
en pares clave-valor, pero difieren en su tiempo de vida y su alcance. 


localStorage: 


localStorage permite almacenar datos en el navegador del usuario de forma 
permanente, incluso después de que se cierre la ventana del navegador o se 
apague la computadora. Los datos almacenados en localStorage están 
disponibles para todas las páginas en el mismo dominio. 


Para usar localStorage en HTML5, primero debemos comprobar si el navegador 
lo admite. Podemos hacerlo con el siguiente código: 


javascript 


Copy code 


if (typeof(Storage) !== “undefined”) 
) 


Para guardar datos en localStorage, podemos usar la propiedad 


localStorage.setltem() y para obtener datos podemos usar la propiedad 
localStorage.getltem(). Por ejemplo: 


javascript 
Copy code 


'/ Guardar un valor en localStorage 


localStorage.setltem(*nombre”, “Juan”); 


'/ Obtener el valor almacenado en localStorage 


var nombre = localStorage.getltem("nombre”); 
console.log(nombre); // Imprime “Juan? 


sessionStorage: 


sessionStorage funciona de manera similar a localStorage, pero los datos se 
almacenan solo durante la sesión del usuario. Esto significa que los datos 
almacenados en sessionStorage se pierden cuando el usuario cierra la ventana 
del navegador o la pestaña actual. 


Para usar sessionStorage, debemos comprobar si el navegador lo admite de la 
misma manera que con localStorage. 


javascript 


Copy code 


if (typeof(Storage) !== “undefined”) 
) 


Para guardar datos en sessionStorage, podemos usar la propiedad 


sessionStorage.setltem() y para obtener datos podemos usar la propiedad 
sessionStorage.getltem(). Por ejemplo: 


javascript 
Copy code 
'/ Guardar un valor en sessionStorage 


essionStorage.setltem(“"nombre”, “Juan”); 


'/ Obtener el valor almacenado en sessionStorage 
var nombre = sessionStorage.getltem(“nombre”); 
console.log(nombre); // Imprime “Juan? 


Es importante tener en cuenta que tanto localStorage como sessionStorage 
solo pueden almacenar datos en formato de cadena. Si necesitamos almacenar 
objetos JavaScript, podemos usar la función JSON.stringify() para convertirlos a 

cadenas antes de guardarlos y la función JSON.parse() para convertirlos de 

vuelta a objetos después de recuperarlos. 


En resumen, el almacenamiento web es una herramienta útil para almacenar 
datos en el navegador del usuario y mantenerlos disponibles para su uso en 
diferentes sesiones y páginas. Con localStorage y sessionStorage podemos 
almacenar datos de forma permanente o temporal, respectivamente, y acceder 
a ellos fácilmente mediante pares clave-valor. 


El drag and drop, o arrastrar y soltar, es una técnica de interacción que permite 
a los usuarios arrastrar elementos y soltarlos en diferentes lugares de la página 
web. Esta técnica se ha vuelto muy popular en las últimas versiones de HTML 
gracias a la incorporación de nuevas características que permiten su 
implementación de manera más sencilla. 


Para implementar el drag and drop en una página web, es necesario utilizar las 
siguientes APIs de HTML5: 


Drag and Drop API: proporciona una forma de interactuar con los elementos 
que se arrastran y se sueltan en la página. 


Data Transfer API: permite compartir datos entre los elementos que se 
arrastran y se sueltan. 


A continuación se muestra un ejemplo práctico de cómo implementar el drag 
and drop en una página web: 


html 
Copy code 


<!DOCTYPE html> 


<html> 


<html> 


[EY 


Adragl 


_ 


¡9 


_ 


ev.preventDefault(); 


function drag(ev) 


ev.dataTransfer.setData(”text”, ev.target.id); 


| 


function drop(ev) 


ev.preventDefault(); 


var data = ev.dataTransfer.getData(”text”); 
ev.target.appendChild(document.getElementByld(data)); 


</script> 


<div id="div1” ondrop="drop(event)” 
ondragover="allowDrop(event)”></div> 

<div id="div2” ondrop="drop(event)” 
ondragover="allowDrop(event)”></div> 


<div id="drag1” draggable="true” ondragstart="drag(event)”></div> 
</body> 


En este ejemplo, se crean dos contenedores div (div1 y div2) y un elemento div 
(drag1) que se puede arrastrar. Los contenedores están configurados para 
aceptar elementos que se arrastren y se suelten en ellos. 


La función allowDrop() se llama cuando el elemento arrastrado se encuentra 
sobre un contenedor. Esta función previene que el navegador realice acciones 
por defecto al soltar el elemento. 


La función drag() se llama cuando se inicia el arrastre del elemento. Esta 
función establece los datos que se compartirán entre los elementos que se 
arrastran y se sueltan. 


La función drop() se llama cuando el elemento arrastrado se suelta en un 
contenedor. Esta función obtiene los datos del elemento arrastrado y lo agrega 
al contenedor. 


En resumen, el drag and drop es una técnica útil para mejorar la interacción del 
usuario con una página web. A través de las APIs de HTML5, es posible 
implementar esta técnica de manera sencilla y personalizada para las 

necesidades específicas de cada proyecto. 


CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para describir 
cómo debe presentarse un documento HTML. CSS permite definir estilos para 


los elementos HTML como el tamaño del texto, el color, la posición, la 
disposición y otros aspectos visuales. 


HTML5 y CSS se complementan entre sí para crear una página web completa y 
visualmente atractiva. La estructura de HTML5 proporciona una base para el 
contenido, mientras que CSS agrega estilos y diseños para hacer que el 
contenido sea más fácil de leer y más atractivo visualmente. 


A continuación se presentan algunos ejemplos de cómo se utiliza CSS con 
HTML5: 


Selección de elementos HTML con CSS 


Para aplicar un estilo a un elemento HTML, debemos seleccionarlo en CSS. Por 
ejemplo, si queremos cambiar el color de fondo del encabezado de nuestra 
página, debemos seleccionar el elemento “header” y aplicar el estilo de fondo 
deseado: 


CSS 


Copy code 


background-color: 4333; 


Utilización de clases en CSS 


Podemos utilizar clases en CSS para aplicar estilos a múltiples elementos HTML. 
Por ejemplo, si queremos aplicar un estilo a todas las imágenes que se 
encuentran dentro de un div con la clase “contenido”, podemos hacer lo 
siguiente: 


CSS 


Copy code 


border: 2px solid black; 
margin: 10px; 
Estilos de texto en CSS 


CSS también nos permite definir estilos de texto para nuestros elementos HTML. 
Por ejemplo, podemos cambiar el tamaño y la fuente del texto en un elemento 
“p” de la siguiente manera: 


CSS 
Copy code 
po 
font-family: Arial, sans-serif; 
) 
Posicionamiento y diseño de elementos HTML 


CSS nos permite definir la posición y el diseño de los elementos HTML. Por 
ejemplo, si queremos colocar un div en la parte superior derecha de nuestra 
página, podemos utilizar la propiedad “position” y “right” en CSS: 


CSS 
Copy code 


) 


En resumen, CSS es una herramienta poderosa que permite dar estilo y diseño a 
nuestros documentos HTML5, lo que resulta en una experiencia de usuario más 
atractiva y coherente. 


La etiqueta style y la etiqueta link se utilizan en HTML5 para vincular hojas de 
estilo CSS a un documento HTML. A continuación se detalla cada una de ellas. 


Etiqueta style 


La etiqueta style se utiliza para incluir una hoja de estilo CSS en línea dentro de 
un documento HTML. Esto significa que el estilo se aplica solo al documento 
que contiene la etiqueta style. 


La sintaxis básica de la etiqueta style es la siguiente: 


html 


Copy code 


Dentro de la etiqueta style, se pueden incluir todas las reglas de estilo CSS 
necesarias para dar formato al contenido del documento HTML. 


A continuación se muestra un ejemplo de cómo se puede utilizar la etiqueta 
style para definir algunos estilos para un párrafo: 


html 
Copy code 


<!IDOCTYPE html> 


<html> 


<htmi> 


MT. 


font-size: 18px; 


font-weight: bold; 


En este ejemplo, la etiqueta style se utiliza para definir un estilo para todos los 
párrafos (p) del documento. Los estilos especificados incluyen un tamaño de 
fuente de 18 píxeles, un peso de fuente en negrita y un color de texto oscuro. 


Etiqueta link 


La etiqueta link se utiliza para vincular una hoja de estilo CSS externa a un 
documento HTML. Esto significa que la misma hoja de estilo CSS puede ser 
utilizada por múltiples documentos HTML, lo que facilita el mantenimiento y la 
gestión del estilo. 


La sintaxis básica de la etiqueta link es la siguiente: 


html 


Copy code 


<link rel="stylesheet” href="style.css”> 


En este ejemplo, la etiqueta link se utiliza para vincular la hoja de estilo CSS 
style.css al documento HTML actual. La hoja de estilo se encuentra en un 
archivo separado y puede ser editada sin afectar a otros documentos HTML que 
la utilicen. 


A continuación se muestra un ejemplo de cómo se puede utilizar la etiqueta link 
para vincular una hoja de estilo CSS externa que define algunos estilos para los 
párrafos: 


html 


Copy code 


<link rel="stylesheet” href="style.css”> 


En este ejemplo, la hoja de estilo CSS style.css contiene las siguientes reglas de 
estilo para los párrafos: 


CSS 
Copy code 
Y 
font-size: 18px; 
) 


Al vincular la hoja de estilo a través de la etiqueta link, los estilos definidos en 
style.css se aplican al párrafo en el documento HTML. 


Los selectores CSS son una parte fundamental del lenguaje de hojas de estilo en 
cascada (CSS). Los selectores se utilizan para aplicar estilos a elementos HTML 
específicos en una página web. Hay varios tipos de selectores que se pueden 
utilizar en CSS. 


Selector de tipo: Selecciona todos los elementos de un determinado tipo. Por 
ejemplo, el selector “p” selecciona todos los párrafos en la página. 


Ejemplo: 


CSS 
Copy code 
pl 
) 


Selector de clase: Selecciona todos los elementos que tienen un valor de clase 
específico. Los valores de clase se definen en el atributo class del elemento 
HTML. 


Ejemplo: 


html 
Copy code 


<p class="texto-azul”>Este párrafo será azul</p> 


<p class="texto-rojo”>Este párrafo será rojo</p> 


J 


Selector de ID: Selecciona un elemento específico que tiene un valor de ID 
específico. Los valores de ID se definen en el atributo ¡id del elemento HTML. 


Ejemplo: 


html 
Copy code 
<p ¡id="parrafo-1”>Este es el párrafo 1</p> 
<p id="parrafo-2”>Este es el párrafo 2</p> 
Hparrafo-1 
) 


) 


Selector de atributo: Selecciona todos los elementos que tienen un atributo 
específico y un valor específico. 


Ejemplo: 


html 
Copy code 
<a href="https://www.google.com”>Enlace a Google</a> 


<a href="https://www.facebook.com”>Enlace a Facebook</a> 


a[href="https://www.google.com”] 
) 


a[href="https://www.facebook.com”] 


color: green; 


Selector descendente: Selecciona un elemento secundario que está dentro de 
otro elemento primario. 


Ejemplo: 


html 


Copy code 


<div class="contenedor”> 


CSS] 


color: blue; 


En este ejemplo, el selector .contenedor p seleccionará todos los párrafos 
dentro del elemento <div> con la clase contenedor. 


Estos son solo algunos ejemplos de los selectores CSS que se pueden utilizar 
para aplicar estilos a elementos HTML específicos en una página web. Hay 
muchos más selectores CSS disponibles, y la combinación de diferentes 
selectores puede permitir una gran flexibilidad en la creación de diseños y 
estilos personalizados para una página web. 


Las propiedades CSS son el conjunto de atributos que se pueden aplicar a los 
elementos HTML para definir su aspecto visual y de diseño en una página web. 
A continuación, se explican algunas de las propiedades CSS más comunes: 


color: permite definir el color del texto o fondo del elemento. Ejemplo: 


CSS 
Copy code 
) 


font-family: define la fuente que se utilizará para el texto del elemento. 
Ejemplo: 


CSS 
Copy code 
pl 
font-family: Arial, sans-serif; 


font-size: establece el tamaño de la fuente. Ejemplo: 


CSS 
Copy code 
) 
text-align: define la alineación del texto. Ejemplo: 
CSS 
Copy code 
div 
) 


background-color: establece el color de fondo del elemento. Ejemplo: 
CSS 


Copy code 


background-color: H4F7F7F7; 


margin: define el espacio entre el elemento y los elementos circundantes. 
Ejemplo: 


CSS 
Copy code 
pl 
) 


padding: establece el espacio entre el contenido del elemento y su borde. 
Ejemplo: 


CSS 
Copy code 
div 
) 
border: define el estilo, grosor y color del borde del elemento. Ejemplo: 
CSS 
Copy code 
) 


width y height: establecen la anchura y altura del elemento. Ejemplo: 


CSS 


Copy code 


) 
display: define cómo se mostrará el elemento (bloque, en línea, etc.). Ejemplo: 
CSS 
Copy code 
) 


Estos son solo algunos ejemplos de las muchas propiedades CSS que existen. La 
combinación adecuada de propiedades CSS puede ayudar a crear diseños web 
atractivos y funcionales. 


El modelo de caja (box model) es un concepto importante en CSS que describe 
cómo se representa visualmente un elemento HTML en una página web. Cada 
elemento HTML es considerado una “caja” que contiene contenido, relleno, 
borde y margen. La suma de estos elementos determina el tamaño total de la 
caja. 


El modelo de caja consta de cuatro partes principales: 


Contenido (content): Es el contenido real del elemento HTML. Por ejemplo, si el 
elemento es un párrafo, el contenido sería el texto dentro del párrafo. 


Relleno (padding): Es el espacio entre el contenido y el borde. El relleno se 
utiliza para separar el contenido del borde y proporcionar espacio adicional 
alrededor del contenido. 


Borde (border): Es una línea que rodea el contenido y el relleno. El borde puede 
tener diferentes estilos, anchuras y colores. 


Margen (margin): Es el espacio entre el borde y el elemento adyacente. El 
margen se utiliza para separar los elementos y proporcionar espacio adicional 
entre ellos. 


Los valores de cada una de estas partes se definen mediante las propiedades de 
CSS. Por ejemplo, para agregar un relleno de 10 píxeles alrededor del contenido 
de un elemento, se puede usar la propiedad padding de CSS: 


CSS 


Copy code 


pl 
) 


También se puede especificar diferentes valores de relleno para cada lado de la 
caja utilizando la sintaxis abreviada de la propiedad padding: 


CSS 


Copy code 
p 
padding-top: 20px; 


padding-right: 10px; 
padding-bottom: 20px; 


padding-left: 10px; 


Es importante tener en cuenta que el tamaño total de la caja se calcula 
sumando el tamaño del contenido, el relleno, el borde y el margen. Si se 
especifica un ancho o alto para un elemento, esto se refiere al tamaño total de 
la caja, incluyendo todo el contenido, relleno, borde y margen. 


En resumen, el modelo de caja es un concepto importante en CSS que describe 
cómo se representa visualmente un elemento HTML en una página web. Cada 
elemento es considerado una “caja” que contiene contenido, relleno, borde y 
margen, y el tamaño total de la caja se calcula sumando estos elementos. Las 
propiedades de CSS se utilizan para definir los valores de cada una de estas 
partes. 


html O Copy code 


<!DOCTYPE html> 

<html ="es"> 

<head> 
<meta ="UTF-8"> 
<title>Título de la pági 
<meta ="description' 
<meta ="keywords" 
<link ="stylesheet" 

</head> 

<body> 


<h1>Título de la páginas 


<p>Este es un párrafo de 


LECCIÓN 5 


“Que es el diseño adaptable” 


El diseño adaptable, también conocido como diseño responsivo, es una técnica 
de diseño web que permite que una página web se adapte y se vea bien en 
diferentes dispositivos y tamaños de pantalla, desde computadoras de 
escritorio hasta dispositivos móviles como tabletas y teléfonos inteligentes. 


En lugar de crear diferentes versiones de una página web para cada dispositivo, 
el diseño adaptable utiliza hojas de estilo en cascada (CSS) y medios de 
consulta para cambiar la forma en que se presenta la página según el tamaño 
de la pantalla del dispositivo que la está viendo. 


A continuación se muestra un ejemplo de código de HTML y CSS que utiliza un 
diseño adaptable para cambiar el tamaño y la posición de un elemento de 
página según el tamaño de la pantalla: 


html 


Copy code 


(media only screen and (max-width: 600px) 


transform: translate(-50%, -50%); 


En este ejemplo, el elemento div tiene una clase llamada caja, que se define en 
la hoja de estilo CSS. En la regla CSS principal para .caja, se establece que la 
anchura es del 100% del contenedor, la altura es de 50 píxeles, el color de 
fondo es azul y el texto es blanco. 


Luego, se utiliza un (Vmedia query para aplicar un conjunto diferente de estilos 
cuando la pantalla es más pequeña que 600 píxeles de ancho. En este caso, la 
anchura de .caja se reduce al 50%, la altura a 25 píxeles y el color de fondo a 

rojo. Ademós, se aplica la propiedad position: absolute para que se pueda 
posicionar el elemento en el centro de la pantalla con las propiedades top, left 
y transform. 


En resumen, el diseño adaptable permite que una página web se adapte a 
diferentes tamaños de pantalla y dispositivos, lo que mejora la experiencia del 
usuario y facilita la navegación. 


Las Media Queries son una técnica de CSS3 que permiten definir estilos de 
acuerdo a las características del dispositivo en el que se está visualizando la 
página web, como el ancho de la pantalla, la resolución, la orientación, entre 
otros. 


La sintaxis básica de las Media Queries es la siguiente: 
java 


Copy code 


(Omedia tipo y (condición) 


/* Estilos para el tipo y condición especificados * 


Donde: 


tipo: Indica el tipo de medio en el que se aplicarán los estilos. Por ejemplo, 
screen para pantallas, print para impresoras, speech para lectores de pantalla, 
entre otros. 


condición: Es la condición que se evalúa para aplicar los estilos. Por ejemplo, 
max-width: 768px indica que los estilos se aplicarán si el ancho de la pantalla 
es igual o menor a 768 píxeles. 


A continuación, se muestran algunos ejemplos de Media Queries: 


CSS 


Copy code 


font-size: 14pX; 
) 


) 


* Estilos para pantallas en modo apaisado * 


(media screen and (orientation: landscape) 


background-color: AfOfOfO; 


En el primer ejemplo se aplican estilos específicos para pantallas con ancho 
menor o igual a 768px. En este caso se establece un tamaño de fuente de 14px 
para el body. 


En el segundo ejemplo se aplican estilos específicos para impresoras. En este 
caso se establece un tamaño de fuente de 12pt para el body. 


En el tercer ejemplo se aplican estilos específicos para pantallas en modo 
apaisado. En este caso se establece un color de fondo de HfOfOfO para el body. 


Es importante destacar que las Media Queries permiten crear diseños 
adaptables y responsivos, que se ajustan a las características del dispositivo en 
el que se visualizan, lo que mejora la experiencia del usuario y facilita la lectura 

y navegación por la página web. 


Las imágenes responsivas son aquellas que se adaptan al tamaño de la 
pantalla del dispositivo en el que se están visualizando, para que se vean bien y 
no afecten negativamente la experiencia del usuario. Esto se logra utilizando 
media queries y el atributo “srcset” en la etiqueta “img” de HTML5. 


Las media queries permiten definir diferentes estilos CSS para diferentes 
tamaños de pantalla. Por ejemplo, se puede definir un conjunto de reglas CSS 
para pantallas pequeñas, como las de dispositivos móviles, y otro conjunto de 

reglas CSS para pantallas más grandes, como las de computadoras de 
escritorio. Las media queries se escriben con la sintaxis “COmedia” seguido del 
tamaño de pantalla en píxeles: 


SCSS 


Copy code 


(Omedia (max-width: 767px) 
/* Estilos CSS para pantallas pequeñas * 


(media (min-width: 768px) 
/* Estilos CSS para pantallas más grandes * 


Para hacer que las imágenes sean responsivas, se puede utilizar el atributo 
“srcset” en la etiqueta “img”. Este atributo permite especificar diferentes 
versiones de la imagen para diferentes tamaños de pantalla. La versión 
adecuada se selecciona automáticamente según el tamaño de pantalla del 
dispositivo. 


php 


Copy code 


<img src="imagen.jpg? 


sreset="imagen-sm.jpg 480w, 


imagen-md.jpg 768w, 
imagen-lg.jpg 1200w” 
alt="Descripción de la imagen”> 


En este ejemplo, se especifican tres versiones de la imagen, una para pantallas 
pequeñas, otra para pantallas medianas y otra para pantallas grandes. La 
versión adecuada se seleccionará automáticamente según el tamaño de 
pantalla. La imagen original se especifica en el atributo “src” por si acaso el 
navegador no admite el atributo “srcset”. 


En resumen, las imágenes responsivas son una técnica importante para crear 
sitios web que se vean bien en cualquier dispositivo. Utilizando media queries y 
el atributo “srcset” se pueden crear imágenes que se adapten 
automáticamente al tamaño de pantalla del dispositivo. 


Flexbox es un modelo de diseño en CSS que permite crear diseños flexibles y 
dinámicos para elementos HTML. Con flexbox, se pueden alinear, distribuir y 
ajustar el tamaño de los elementos en relación con su contenedor y con los 
demás elementos de manera sencilla. 


La estructura básica de un contenedor con flexbox es la siguiente: 


html 
Copy code 
<div class="container”> 
<div class="item”>Elemento 1</diva 
<div class="item”>Elemento 2</diva 
<div class="item”>Elemento 3</diva 


En este ejemplo, container es el contenedor y item son los elementos hijos que 
se van a organizar con flexbox. 


Para utilizar flexbox, se debe aplicar la propiedad display: flex en el contenedor: 


CSS 


Copy code 


display: flex; 


Con esta propiedad, todos los elementos hijos de container se convierten 
automáticamente en elementos flexibles. 


A continuación, se explicarán las principales características y propiedades de 
flexbox. 


Dirección principal y dirección secundaria 


Con flexbox, se pueden organizar los elementos en dos direcciones: la dirección 
principal (main axis) y la dirección secundaria (cross axis). 


La dirección principal se define con la propiedad flex-direction, que puede tener 
cuatro valores: row, row-reverse, column y column-reverse. row es la dirección 
por defecto, que organiza los elementos de izquierda a derecha en una fila. 
row-reverse organiza los elementos de derecha a izquierda. column organiza 
los elementos de arriba hacia abajo en una columna. column-reverse organiza 
los elementos de abajo hacia arriba. 


CSS 


Copy code 


display: flex; 
flex-direction: row; 


La dirección secundaria se define con las propiedades justify-content y align- 
items. justify-content alinea los elementos a lo largo de la dirección principal. 
Puede tener los siguientes valores: flex-start, flex-end, center, space-between, 
space-around y space-evenly. align-items alinea los elementos a lo largo de la 

dirección secundaria. Puede tener los siguientes valores: flex-start, flex-end, 

center, baseline y stretch. 


CSS 


Copy code 


flex-direction: row; 


align-items: center 


Orden 


Con la propiedad order, se puede definir el orden en el que se muestran los 
elementos. El valor por defecto es O, y se puede establecer un valor negativo o 
positivo para cambiar el orden. 


CSS 
Copy code 
) 


Alineación 


Con las propiedades align-self y justify-self, se puede ajustar la alineación de un 
elemento específico dentro del contenedor. align-self alinea el elemento a lo 
largo de la dirección secundaria, y puede tener los mismos valores que align- 

items. justify-self alinea el elemento a lo largo de la dirección principal, y puede 

tener los mismos valores que justify-content. 


CSS 
Copy code 


justify-self: center; 


Flexibilidad: Con las propiedades flex-grow, flex-shrink y flex-basis, se puede 
ajustar la flexibilidad de los elementos. 


CSS Grid es una herramienta de diseño que permite organizar los elementos de 

una página web en una cuadrícula bidimensional, lo que facilita el control de su 

posición, tamaño y espaciado. Se puede utilizar para crear diseños complejos y 

flexibles, con filas y columnas que se ajustan automáticamente al contenido y 
al tamaño de la pantalla del dispositivo. 


La estructura básica de una cuadrícula CSS consta de un contenedor (grid 
container) y uno o más elementos secundarios (grid items). El contenedor se 
define mediante la propiedad display: grid, mientras que los elementos 
secundarios se colocan dentro de la cuadrícula mediante las propiedades grid- 
row y grid-column, que especifican su posición en la fila y columna 
correspondiente. También se pueden utilizar otras propiedades como grid- 
template-rows, grid-template-columns y grid-gap para definir el tamaño y el 
espaciado de las filas y columnas. 


A continuación se muestra un ejemplo de una cuadrícula CSS básica: 


html 
Copy code 


<!DOCTYPE html> 


.Ccontalner 


display: grid; 


grid-template-columns: repeat(3, 1fr); 


background-color: fccc; 


</style> 


<body> 


<div class="container”> 
<div class="item”>1</div> 
<div class="item”>2</div> 
<div class="item”>3</div> 
<div class="item”>5</div> 
<div class="item”>6</div> 


En este ejemplo, se crea una cuadrícula con tres columnas iguales (grid- 
template-columns: repeat(3, 1fr)) y un espaciado de 20 píxeles entre cada 
elemento (grid-gap: 20px). Cada elemento secundario es un div con la 
clase .item, que se coloca en la posición correspondiente mediante las 
propiedades grid-row y grid-column. También se utilizan algunas propiedades 
de estilo adicionales para dar formato a los elementos. 


CSS Grid es una herramienta poderosa y flexible para el diseño web, que 
permite crear diseños adaptables y dinámicos con facilidad. Con la práctica y la 
experimentación, se pueden crear diseños impresionantes y efectivos para 
cualquier tipo de proyecto web. 


La accesibilidad web es un conjunto de prácticas y técnicas que permiten que 
las páginas web sean accesibles y utilizables por personas con discapacidades. 
La accesibilidad web es importante porque ayuda a garantizar que todos 
puedan acceder a la información y utilizar los servicios en línea, 
independientemente de sus capacidades. HTML5 es una tecnología de marcado 
que permite crear páginas web accesibles. 


A continuación, se describen algunas de las prácticas y técnicas que pueden 
ayudar a garantizar la accesibilidad web en HTML5: 


Usar etiquetas HTML5 semánticas: Las etiquetas semánticas son aquellas que 
describen el contenido de la página. El uso adecuado de estas etiquetas puede 
ayudar a los usuarios con discapacidades a entender la estructura y el 
significado de la página. Por ejemplo, la etiqueta “header” se utiliza para 
identificar el encabezado de la página, la etiqueta “nav” se utiliza para 
identificar la navegación de la página, la etiqueta “main” se utiliza para 
identificar el contenido principal de la página, y la etiqueta “footer” se utiliza 
para identificar el pie de página de la página. 


html 


Copy code 


<h1>Título de la página</h1> 


<ul> 


ETE 


<li><a href="4">Inicio</a></li> 


<li><a href="4">Acerca de</a></li> 


<li><a href="4">Contacto</a></li> 


<h2>Contenido principal</h2> 


<p>Este es el contenido principal de la página.</p> 


A . 


<p>Pie de página</p> 


Proporcionar alternativas a las imágenes: Las imágenes son importantes para 
mejorar la estética y el contenido de una página web, pero los usuarios con 
discapacidades visuales no pueden verlas. HTML5 ofrece la etiqueta “alt” para 
proporcionar un texto alternativo para las imágenes. Esto permite que los 
usuarios con discapacidades visuales comprendan el contenido de la imagen a 
través del texto alternativo. 


html 


Copy code 


<img src="imagen.jpg” alt="Descripción de la imagen”> 


Usar atributos “title” y “aria-label” en los enlaces: Los enlaces son elementos 
importantes en una página web, pero los usuarios con discapacidades visuales 
no pueden ver el texto del enlace. HTML5 ofrece la etiqueta “title” para 
proporcionar información adicional sobre el enlace, que se muestra cuando se 
pasa el cursor sobre el enlace. Además, la etiqueta “aria-label” puede utilizarse 
para proporcionar una etiqueta para el enlace que se leerá en voz alta a los 
usuarios de lectores de pantalla. 


html 


Copy code 


<a href="4" title="Más información sobre el producto”>Producto X</a> 


<a href="+" aria-label="Comprar ahora”*>Comprar</a> 


Usar etiquetas de formulario y atributos “label” y “placeholder”: Los 
formularios son una parte importante de muchas páginas web, pero los 
usuarios con discapacidades visuales pueden tener dificultades para entender 
los campos de entrada. HTML5 ofrece la etiqueta “label” para etiquetar cada 
campo de entrada y la etiqueta “placeholder” para proporcionar un texto de 
sugerencia en el campo de entrada. 


html 
Copy code 
<label for="nombre”>Nombre:</label> 
“Los atributos ALT y TITLE” 


Los atributos “alt” y “title” son muy importantes en HTML5 para mejorar la 
accesibilidad y la usabilidad de una página web. A continuación, se detalla la 
información necesaria para aprender sobre estos atributos, con ejemplos y 
argumentos bien explicados. 


Atributo “alt”: 


El atributo “alt” se utiliza en HTML5 para proporcionar una descripción 
alternativa de una imagen, en caso de que la imagen no se pueda mostrar o si 
el usuario tiene alguna discapacidad visual. Es importante proporcionar un 
texto alternativo adecuado para cada imagen, ya que esto ayuda a los usuarios 
a comprender el contenido de la página, incluso si no pueden ver la imagen. 


Ejemplo: 


html 


Copy code 


<img src="imagen.jpg” alt="Descripción de la imagen”> 


En este ejemplo, la etiqueta “img” se utiliza para insertar una imagen en la 
página web, y el atributo “alt” se utiliza para proporcionar una descripción de 
la imagen. Si la imagen no se puede mostrar, el texto alternativo se mostrará 

en su lugar. 


Es importante utilizar descripciones claras y descriptivas en el atributo “alt”, 
para que los usuarios con discapacidad visual puedan comprender el contenido 
de la imagen. Ademós, el texto alternativo también puede ser útil para mejorar 

la optimización de motores de búsqueda (SEO) de la página web. 


Atributo “title”: 


El atributo “title” se utiliza en HTML5 para proporcionar información adicional 

sobre un elemento en la página web, como un enlace o una imagen. Este texto 

se muestra cuando el usuario pasa el cursor sobre el elemento, y puede ser útil 
para proporcionar información adicional o aclarar el propósito del elemento. 


Ejemplo: 


html 


Copy code 


<a href="4" title="Más información sobre el producto”>Producto X</a> 


En este ejemplo, la etiqueta “a” se utiliza para crear un enlace, y el atributo 
“title” se utiliza para proporcionar información adicional sobre el enlace. 
Cuando el usuario pasa el cursor sobre el enlace, se muestra el texto “Más 
información sobre el producto”. 


El atributo “title” también se puede utilizar en otros elementos de la página 
web, como imágenes o botones, para proporcionar información adicional sobre 
el elemento. Es importante utilizar el atributo “title” de manera adecuada y 
relevante, para que los usuarios puedan comprender mejor el propósito y el 
contenido de la página web. 


En resumen, los atributos “alt” y “title” son importantes en HTML5 para 
mejorar la accesibilidad y la usabilidad de una página web. Es importante 
utilizarlos de manera adecuada y relevante para proporcionar información 

adicional y mejorar la comprensión del contenido de la página web. 


= Curso HTML5 Detallado + 


Lección 6: Accesibilidad y SEO 
en HTML5 


* ¿Qué es la accesibilidad 
web? 

" Atributos alt y title 

” Etiquetas meta 

" Etiquetas h1-h6 

" Atributo lang 


" Etiquetas semánticas 


Las etiquetas “meta” son elementos importantes en HTML5 que se utilizan para 
proporcionar información adicional sobre una página web, como el título, la 
descripción y las palabras clave. A continuación, se detalla la información 
necesaria para aprender sobre las etiquetas “meta” en HTML5, con ejemplos y 
argumentos bien explicados. 


Etiqueta “meta” para el título: 


La etiqueta “meta” se utiliza en HTML5 para definir el título de una página web. 
El título de la página se muestra en la pestaña del navegador y es importante 
para identificar el contenido de la página y mejorar la experiencia del usuario. 


Ejemplo: 


html 


Copy code 


En este ejemplo, la etiqueta “title” se utiliza para definir el título de la página. 
Es importante utilizar un título claro y descriptivo para que los usuarios puedan 
identificar fácilmente el contenido de la página. 


Etiqueta “meta” para la descripción: 


La etiqueta “meta” también se utiliza en HTML5 para proporcionar una 
descripción de la página web. La descripción se utiliza en los resultados de 
búsqueda de los motores de búsqueda y es importante para atraer a los 
usuarios y mejorar el SEO de la página web. 


Ejemplo: 


html 


Copy code 


<meta name=”description” content="Descripción de la página web”> 


En este ejemplo, la etiqueta “meta” se utiliza para definir la descripción de la 


página web. Es importante utilizar una descripción clara y descriptiva para que 
los usuarios puedan identificar fácilmente el contenido de la página y los 
motores de búsqueda puedan indexar correctamente la página. 


Etiqueta “meta” para las palabras clave: 


La etiqueta “meta” también se utiliza en HTML5 para proporcionar palabras 
clave relevantes para la página web. Las palabras clave se utilizan en los 
resultados de búsqueda de los motores de búsqueda y son importantes para 
mejorar el SEO de la página web. 


Ejemplo: 


html 


Copy code 


<meta name="keywords” content="Palabra clave 1, Palabra clave 2, Palabra 


En este ejemplo, la etiqueta “meta” se utiliza para definir las palabras clave 


relevantes para la página web. Es importante utilizar palabras clave relevantes 
y descriptivas para que los usuarios puedan identificar fácilmente el contenido 
de la página y los motores de búsqueda puedan indexar correctamente la 
página. 


En resumen, las etiquetas “meta” son importantes en HTML5 para 
proporcionar información adicional sobre una página web, como el título, la 
descripción y las palabras clave. Es importante utilizar estas etiquetas de 
manera adecuada y relevante para mejorar la experiencia del usuario y el SEO 
de la página web. 


Las etiquetas H1-H6 son etiquetas de encabezado en HTMIL5 que se utilizan 
para estructurar el contenido de una página web. A continuación, se detalla la 
información necesaria para aprender sobre estas etiquetas, con ejemplos y 
argumentos bien explicados. 


Etiqueta H1: 


La etiqueta H1 se utiliza para el encabezado principal de una página web. Debe 
ser utilizado solo una vez en cada página, ya que es el encabezado más 
importante y define el tema principal de la página. 


Ejemplo: 


html 
Copy code 


<h1>Título principal de la página</h1> 


En este ejemplo, la etiqueta H1 se utiliza para definir el título principal de la 
página. Es importante utilizar un título claro y descriptivo para que los usuarios 
puedan identificar fácilmente el contenido de la página. 


Etiqueta H2: 


La etiqueta H2 se utiliza para encabezados secundarios en una página web. Es 
importante utilizar esta etiqueta para dividir el contenido de la página en 
secciones y hacer que el contenido sea fácil de leer y entender. 


Ejemplo: 


html 


Copy code 


<h2>Sección 1</h2> 
<p>Contenido de la sección 1</p> 
<h2>Sección 2</h2> 

<p>Contenido de la sección 2</p> 


En este ejemplo, las etiquetas H2 se utilizan para dividir el contenido de la 
página en secciones. Es importante utilizar encabezados secundarios para 
estructurar el contenido de la página y hacer que el contenido sea fácil de leer y 
entender. 


Etiquetas H3-H6: 


Las etiquetas H3-H6 se utilizan para encabezados de nivel inferior en una 
página web. Estas etiquetas se utilizan para dividir el contenido de la página en 
subsecciones y hacer que el contenido sea aún más fácil de leer y entender. 


Ejemplo: 


html 


Copy code 


<h3>Subsección 1.1</h3> 
<p>Contenido de la subsección 1.1</p> 


<h3>Subsección 1.2</h3> 


<p>Contenido de la subsección 1.2</p> 


<h4>Subsección 1.2.1</h4> 
<p>Contenido de la subsección 1.2. 1</p> 


<h4>Subsección 1.2.2</h4> 
<p>Contenido de la subsección 1.2.2</p> 


En este ejemplo, las etiquetas H3-H6 se utilizan para dividir el contenido de la 


página en subsecciones. Es importante utilizar encabezados de nivel inferior 


para estructurar aún más el contenido de la página y hacer que el contenido 
sea fácil de leer y entender. 


En resumen, las etiquetas H1-H6 son importantes en HTML5 para estructurar el 
contenido de una página web y hacer que el contenido sea fácil de leer y 
entender. Es importante utilizar estas etiquetas de manera adecuada y 
relevante para mejorar la experiencia del usuario y la accesibilidad de la página 
web. 


El atributo “lang” en HTML5 se utiliza para especificar el idioma principal 
utilizado en el contenido de una página web. Es importante utilizar este 
atributo correctamente para mejorar la accesibilidad y la experiencia del 
usuario. A continuación, se detalla la información necesaria para aprender 
sobre el atributo “lang”, con ejemplos y argumentos bien explicados. 


Sintaxis: 


El atributo “lang” se utiliza en la etiqueta HTML para especificar el idioma 
principal utilizado en el contenido de la página web. La sintaxis es la siguiente: 


html 
Copy code 


<html lang="idioma”> 


Donde “idioma” es el código del idioma utilizado en la página web. El código 
del idioma está definido por ISO 639-1, que es un estándar internacional para 
la codificación de los nombres de los idiomas. 


Ejemplo: 
A continuación, se muestra un ejemplo del uso del atributo “lang” en HTML5: 
html 
Copy code 


<!DOCTYPE html> 


<h1>Bienvenidos a mi sitio web</h1> 


<p>Este es mi sitio web en español.</p> 
</body> 


En este ejemplo, se utiliza el atributo “lang” con el valor “es” para especificar 
que el contenido de la página web está en español. Es importante utilizar el 
valor correcto para el atributo “lang” para que los navegadores puedan 
mostrar el contenido de manera adecuada y los motores de búsqueda puedan 
indexar correctamente el contenido. 


Argumentos: 


Es importante utilizar el atributo “lang” correctamente para mejorar la 
accesibilidad y la experiencia del usuario. Algunos argumentos para utilizar el 
atributo “lang” son: 


Mejorar la accesibilidad: Al especificar el idioma principal utilizado en la página 
web, se mejora la accesibilidad para los usuarios que utilizan lectores de 
pantalla o que tienen dificultades para leer el contenido en otros idiomas. 


Indexación en los motores de búsqueda: Los motores de búsqueda utilizan el 
atributo “lang” para indexar el contenido de una página web de manera 
correcta en su base de datos. Si no se especifica el idioma, el contenido puede 
ser indexado en el idioma equivocado. 


Mejorar la experiencia del usuario: Al utilizar el atributo “lang” correctamente, 
se mejora la experiencia del usuario al mostrar el contenido en el idioma que 
entienden mejor. 


En resumen, el atributo “lang” en HTML5 es importante para especificar el 
idioma principal utilizado en el contenido de una página web. Es importante 


utilizar este atributo correctamente para mejorar la accesibilidad, la indexación 
en los motores de búsqueda y la experiencia del usuario. 


Las etiquetas semánticas en HTML5 son elementos HTML que se utilizan para 
proporcionar información adicional sobre el contenido de una página web. 
Estas etiquetas se utilizan para definir la estructura y el significado del 
contenido, en lugar de su apariencia visual. A continuación, se detalla la 
información necesaria para aprender sobre las etiquetas semánticas en HTML5, 
con ejemplos y argumentos bien explicados. 


Sintaxis: 


Las etiquetas semánticas en HTML5 se utilizan para definir la estructura y el 
significado del contenido de la página web. Algunas etiquetas semánticas 
comunes en HTML5 son: 


<header>: Se utiliza para definir el encabezado de una sección o página web. 
<nav>: Se utiliza para definir una sección de navegación. 
<main>: Se utiliza para definir el contenido principal de una página web. 
<section>: Se utiliza para definir una sección en una página web. 
<article>: Se utiliza para definir un artículo independiente en una página web. 


<aside>: Se utiliza para definir una sección de contenido relacionado con el 
contenido principal de la página web. 


<footer>: Se utiliza para definir el pie de página de una sección o página web. 


La sintaxis de estas etiquetas es la misma que para cualquier otra etiqueta 
HTML: 


html 


Copy code 


<etiqueta>Contenido de la etiqueta</etiqueta> 


Donde “etiqueta” es el nombre de la etiqueta semántica, y “Contenido de la 
etiqueta” es el contenido que se va a mostrar dentro de la etiqueta. 


Ejemplo: 


A continuación, se muestra un ejemplo del uso de las etiquetas semánticas en 
HTML5: 


html 
Copy code 
<html lang="en”> 
<h1>Mi sitio web</h1> 


<li><a href="4">Inicio</a></li> 


<li><a href="4">Acerca de</a></li> 


<li><a href="4">Contacto</a></li> 


</section>» 


<section> 


<p>Derechos de autor 8:copy; 2023 - Mi sitio web</p> 


En este ejemplo, se utilizan varias etiquetas semánticas para definir la 


estructura y el significado del contenido de la página web. Se utiliza la etiqueta 
<header> para definir el encabezado de la página web, que incluye el título y la 
navegador. 


Un framework en lenguaje HTML5 es un conjunto de herramientas y 
componentes predefinidos que se utilizan para construir y diseñar páginas web 
de forma más rápida y eficiente. Estos frameworks proporcionan una 
estructura y un conjunto de reglas que se deben seguir para desarrollar un sitio 
web consistente y de alta calidad. A continuación, se detalla la información 
necesaria para aprender sobre los frameworks en lenguaje HTML5, con 
ejemplos y argumentos bien explicados. 


Sintaxis: 


Los frameworks en HTML5 se utilizan para desarrollar sitios web más 
rápidamente y con mayor eficiencia. Algunos de los frameworks más comunes 
en HTML5 son: 


Bootstrap: es uno de los frameworks más populares y ampliamente utilizados 
en el desarrollo de sitios web. Bootstrap se utiliza para crear diseños 
responsivos y adaptables, que funcionan bien en una variedad de dispositivos y 
tamaños de pantalla. 


Foundation: es otro framework popular que se utiliza para crear sitios web 
adaptables y responsivos. Foundation es conocido por su flexibilidad y 
personalización, lo que permite a los desarrolladores crear diseños 
personalizados y únicos. 


Materialize: es un framework de diseño basado en Material Design, el cual es 
un lenguaje de diseño desarrollado por Google. Materialize se utiliza para crear 
sitios web con una apariencia y sensación modernas y limpias. 


Semantic Ul: es un framework de diseño que se centra en la semántica del 
HTML y utiliza etiquetas semánticas para definir el contenido de una página 
web. Semantic Ul se utiliza para crear sitios web que sean fáciles de entender y 
navegar. 


La sintaxis para utilizar estos frameworks es la misma que cualquier otro 
lenguaje de programación: 


html 


Copy code 


<!-- Incluyendo el enlace al archivo CSS de Bootstrap --> 


<link rel="stylesheet” 


href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cs 
” integrity="sha384- 


Gn5384xqQ1a0WXA+058RXPxPg6fyiSzp0Ur2H7T9gmd+qnEZX6BbK8MvGU6sBs 


” crossorigin="anonymous”> 


<!-- Incluyendo el archivo JavaScript de Bootstrap --> 


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js? 


integrity="sha384- 


KJ302DKtIkvYIK3UENzmMM7KCkRr/re9/Qpg6VAZGJ)wFDMVNA/GpGFF93hXpG5 
kN” crossorigin="anonymous”></script> 


rc=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umda/popper.min.j 


” integrity="sha384- 


ApNbgh9B+Y10QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” 
crossorigin="anonymous”></script> 


rc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” 
integrity="sha384- 


ZRESpejh4U02d8jOt6vLEHfe/JQGIRRSQOXSfFWpi1lMquVdAyjUar5+76PVCmYI' 
crossorigin="anonymous”></script> 


Ejemplo: 


A continuación, se muestra un ejemplo de cómo utilizar el framework Bootstrap 
en una página web: 


html 


Copy code 


<meta name="viewport” content="width=device-width, initial-scale=1.0”> 


<title>»My Website</title> 


<!-- Incluyendo el enlace al archivo CSS de Bootstrap --> 


<link rel="stylesheet” 


href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cs 
” integrity="sha384- 
Gn5384xqQ100WXA+058RXPxPg6fyiSzp0Ur2H7T9gmd+qnEZX6BbK8MvGU6sBs 


” crossorigin="anonymous”> 
</head> 
<body> 


<nav class="navbar navbar-expand-lg navbar-light bg-light”> 


<a class="navbar-brand” href="4”>My Website</a> 


<button class="navbar-toggler” type="button” data-toggle="collapse” data- 


target="HnavbarNav” aria-controls="navbarNav” aria-expanded="false” aria- 
label="Toggle navigation”> 


<span class="navbar-toggler-icon”></span> 
<div class=”collapse navbar-collapse” id="navbarNav”> 
<ul class="navbar-nav”> 


<li class="nav-item active”> 


<a class="nav-link” href="+">Home <span class="sr- 
only”>(current)</span></a> 


</li> 


<li class="nav-item”> 


<a class="nav-link” href="+">About</a> 


</li> 


<li class="nav-item”> 
<a class="nav-link” href="4">Services</a> 


</li> 


<li class="nav-item”> 


<a class="nav-link” href="H">Contact</a> 


<div class="container mt-57> 


<h1>Welcome to My Website!</h1> 
<p>This is a sample website built with Bootstrap.</p> 


<button class="btn btn-primary”>Learn More</button> 
<!-- Incluyendo el archivo JavaScript de Bootstrap --> 


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js* 


integrity="sha384- 


KJ302DKtIkvYIK3UENz2mMM7KCkRr/rE9/Qpg6VAZGJwFDMVNA/GpGFF93hXpG5 
kN” crossorigin="anonymous”></script> 


<scrip 


rc=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.j 
ApNbgh9B+Y10QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” 
crossorigin="anonymous”></script> 


rc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/¡s/bootstrap.min.js* 


integrity="sha384- 


ZR6Spejh4U0O2d8jOt6vLEHfe/JQGIRRSQQXSfFWpi1MquVdAyjUar5+76PVCmYI' 


crossorigin="anonymous”></script> 


</html> 


uu 


En este ejemplo, se utilizó el framework Bootstrap para crear una barra de 

navegación y un botón de llamado a la acción. Se incluyó el archivo CSS de 

Bootstrap en el encabezado de la página, y se utilizó las clases de Bootstrap 
para definir el diseño y los estilos de la barra de navegación y 


Materialize es un framework de diseño web responsivo basado en Material 
Design, creado por Google. Materialize utiliza HTML, CSS y JavaScript para 
permitir a los desarrolladores crear páginas web con un diseño atractivo y 
moderno, que se adapta automáticamente a cualquier tamaño de pantalla. 


Materialize proporciona una amplia variedad de componentes para la 
construcción de sitios web, como botones, tarjetas, formularios, modales, 


navegación, entre otros. También incluye una biblioteca de iconos basada en 
Material Design. 


Para utilizar Materialize en un sitio web, se debe incluir la hoja de estilos CSS y 
los archivos JavaScript de Materialize en el encabezado de la página. A 
continuación, se muestra un ejemplo de cómo se puede utilizar Materialize en 
una página HTML: 


php 
Copy code 
</IDOCTYPE html> 
<html> 


<meta charset="UTF-8”> 


<meta name="viewport” content="width=device-width, initial-scale=1.0”> 


<title»My Website</title> 


<!-- Incluyendo la hoja de estilos CSS de Materialize --> 


<link rel="stylesheet” 


href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize. 


min.css”> 


<div class="nav-wrapper”> 


<a href="+” class="brand-logo”>My Website</a> 


<ul id="nav-mobile” class=”right hide-on-med-and-down”> 


<li><a href="H">Home</a></li> 


<li><a href="4">About</a></li> 


<li><a href="+">Services</a></li> 


<li><a href="4">Contact</a></li> 


<div class="container”> 


<h1>Welcome to My Website!</h1> 


<p>This is a sample website built with Materialize.</p> 


<a class="waves-effect waves-light btn”>Learn More</a> 


<!-- Incluyendo los archivos JavaScript de Materialize --> 


rc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/¡s/materialize.mi 


n.js”></script> 


En este ejemplo, se utiliza Materialize para crear una barra de navegación y un 

botón de llamado a la acción. Se incluyó la hoja de estilos CSS de Materialize en 

el encabezado de la página, y se utilizó las clases de Materialize para definir el 
diseño y los estilos de la barra de navegación y el botón. 


Ademós, se puede notar el uso de las clases “waves-effect” y “waves-light” en 
el botón de llamado a la acción, las cuales son clases predefinidas de 
Materialize que proporcionan un efecto de onda al hacer clic en el botón. 


Materialize es una excelente opción para aquellos que desean crear sitios web 
con un diseño moderno y responsivo, sin tener que escribir una gran cantidad 
de código CSS y JavaScript personalizado. 


SASS (Syntactically Awesome Style Sheets) y LESS (Leaner CSS) son 
preprocesadores de CSS que permiten a los desarrolladores escribir estilos de 
hojas de estilo con una sintaxis más fácil y estructurada, lo que les ayuda a 
ahorrar tiempo y mejorar la organización y mantenimiento de sus proyectos de 
desarrollo web. 


Ambos preprocesadores ofrecen características similares, como variables, 
funciones, mixins, anidamiento, operaciones matemáticas y muchas más. La 
diferencia principal entre SASS y LESS es su sintaxis. SASS utiliza una sintaxis 
basada en indentación, similar a Python, mientras que LESS utiliza una sintaxis 
más similar a la de CSS. 


A continuación, se muestra un ejemplo de cómo se puede utilizar variables en 
SASS y LESS: 


SASS: 


CSS 
Copy code 


Sprimary-color: 12196F3; 


Ssecondary-color: HFFC107: 


background-color: Sprimary-color; 


color: Ssecondary-color; 


LESS: 


less 


Copy code 


(Oprimary-color: 42196F3; 
(Osecondary-color: H4FFC107; 


background-color: (Vprimary-color; 


color: (dsecondary-color; 


En este ejemplo, se definieron variables para los colores primario y secundario 
en ambos preprocesadores, y luego se usaron esas variables en la definición de 
un estilo para un elemento “header”. 


Para utilizar SASS o LESS en un proyecto de desarrollo web, se necesita 
compilar los archivos de estilo a CSS para que el navegador pueda 
interpretarlos. Esto se puede hacer utilizando un compilador de SASS o LESS, el 
cual puede ser instalado como una dependencia en el proyecto o puede ser 
utilizado en línea. 


En resumen, SASS y LESS son preprocesadores de CSS que permiten a los 
desarrolladores escribir estilos de hojas de estilo de manera más eficiente y 
estructurada. Ambos ofrecen características similares, como variables, 
funciones, mixins y anidamiento, lo que ayuda a los desarrolladores a ahorrar 
tiempo y mejorar la organización y mantenimiento de sus proyectos. 
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Existen muchas herramientas disponibles para el desarrollo web que pueden 
ayudar a los desarrolladores a trabajar de manera más eficiente y productiva. 
A continuación, se detallan algunas de las herramientas más populares para el 

desarrollo web. 


Editores de código: los editores de código son herramientas que permiten a los 
desarrolladores escribir y editar código de manera eficiente. Algunos de los 
editores de código más populares incluyen Visual Studio Code, Sublime Text y 
Atom. 


Navegadores web: los navegadores web son una herramienta fundamental 
para el desarrollo web, ya que permiten a los desarrolladores ver y probar sus 
sitios web en tiempo real. Los navegadores más populares para el desarrollo 
web incluyen Google Chrome, Mozilla Firefox y Microsoft Edge. 


Frameworks de CSS y JavaScript: los frameworks son colecciones de código 

preescrito que pueden ayudar a los desarrolladores a construir sitios web y 

aplicaciones web de manera más eficiente. Algunos de los frameworks más 
populares incluyen Bootstrap, Foundation y ¡Query. 


Sistemas de control de versiones: los sistemas de control de versiones son 
herramientas que permiten a los desarrolladores realizar un seguimiento de los 
cambios en el código fuente y colaborar con otros desarrolladores en un 
proyecto. Algunos de los sistemas de control de versiones más populares 
incluyen Git y SVN. 


Herramientas de optimización de rendimiento: las herramientas de 
optimización de rendimiento pueden ayudar a los desarrolladores a mejorar el 
rendimiento de sus sitios web, reduciendo el tiempo de carga y mejorando la 


experiencia del usuario. Algunas de las herramientas de optimización de 
rendimiento más populares incluyen PageSpeed Insights de Google y GTmetrix. 


Herramientas de depuración y prueba: las herramientas de depuración y 
prueba pueden ayudar a los desarrolladores a identificar y solucionar 
problemas en su código, así como a probar su sitio web en diferentes 

dispositivos y navegadores. Algunas de las herramientas de depuración y 

prueba más populares incluyen Chrome DevTools, Firefox Developer Tools y 
BrowserStack. 


En conclusión, existen muchas herramientas disponibles para el desarrollo web, 
desde editores de código hasta sistemas de control de versiones y herramientas 
de optimización de rendimiento. Los desarrolladores pueden elegir las 
herramientas que mejor se adapten a sus necesidades y preferencias para 
trabajar de manera más eficiente y productiva. 


JavaScript es un lenguaje de programación de alto nivel que se utiliza para 
agregar interactividad y dinamismo a los sitios web. Se ejecuta en el navegador 
del cliente y puede interactuar con el HTML y el CSS de la página. A 
continuación, se detallan algunos conceptos clave de JavaScript con ejemplos y 
argumentos bien explicados. 


Variables: las variables son contenedores para almacenar valores en JavaScript. 
Pueden contener cualquier tipo de dato, como cadenas de texto, números o 
valores booleanos. Para declarar una variable en JavaScript, se utiliza la 
palabra clave “var”, seguida del nombre de la variable y el valor que se le 
asignará. Por ejemplo: 


javascript 


Copy code 


var edad = 25; 
var esMayorDeEdad = true; 


Operadores: los operadores son símbolos que se utilizan para realizar 
operaciones en JavaScript. Los operadores aritméticos, como “+” y “-%, se 
utilizan para realizar cálculos matemáticos. Los operadores de comparación, 
como “==” y “>”, se utilizan para comparar valores. Por ejemplo: 


javascript 


Copy code 


var suma = 10 + 5; // resultado: 15 


var eslgual = 10 == 5; // resultado: false 


var esMayor = 10 > 5; // resultado: true 


Funciones: las funciones son bloques de código que se pueden reutilizar en 
diferentes partes del código. Se declaran utilizando la palabra clave “function”, 
seguida del nombre de la función y los parámetros que acepta. Por ejemplo: 


SCSS 


Copy code 


unction saludar(nombre) 


dl . 


alert(”Hola, “+ nombre + “!”); 


aludar("Juan”); // muestra el mensaje “Hola, Juan!” 


Eventos: los eventos son acciones que ocurren en la página, como hacer clic en 
un botón o mover el mouse. JavaScript se utiliza para responder a estos eventos 
y realizar acciones en consecuencia. Se puede agregar un evento a un elemento 
HTML utilizando el atributo “onclick” o utilizando el método “addEventListener”. 

Por ejemplo: 


less 
Copy code 
<button onclick="saludar(“Juan”)”>Saludar</button> 


document.getElementByld(“botonSaludar”).addEventListener(”click”, 


saludar(”Juan”); 


A 


En conclusión, JavaScript es un lenguaje de programación esencial para el 
desarrollo web. Permite agregar interactividad y dinamismo a los sitios web, lo 
que mejora la experiencia del usuario. Los conceptos clave de JavaScript 
incluyen variables, operadores, funciones y eventos. Al aprender estos 
conceptos y practicar su uso, los desarrolladores pueden crear sitios web más 
avanzados e interactivos. 


En JavaScript, las variables se utilizan para almacenar datos y se declaran 
utilizando las palabras clave “var”, “let” o “const”. A continuación, se detallan 
los tipos de datos en JavaScript y cómo se utilizan las variables para 
almacenarlos. 


Tipos de datos primitivos: 
Números: se utilizan para almacenar valores numéricos. Por ejemplo: 
javascript 


Copy code 


var edad = 25; 
var peso = 65.5; 


Cadena de texto: se utilizan para almacenar valores de texto. Se pueden utilizar 
comillas simples o dobles para declarar una cadena de texto. Por ejemplo: 


javascript 


Copy code 


var nombre = Juan”; 
var apellido = “Pérez”; 


Booleanos: se utilizan para almacenar valores de “verdadero” o “falso”. Por 
ejemplo: 


javascript 


Copy code 


var esMayorDeEdad = true; 
var tieneHermanos = false; 


Undefined: se utiliza cuando una variable no tiene un valor asignado. Por 
ejemplo: 


javascript 
Copy code 
Null: se utiliza para indicar que una variable no tiene un valor. Por ejemplo: 
javascript 
Copy code 
Tipos de datos complejos: 


Objetos: se utilizan para almacenar colecciones de datos relacionados. Por 
ejemplo: 


yaml 
Copy code 
nombre: “Juan”, 


Arrays: se utilizan para almacenar colecciones de datos. Por ejemplo: 


CSS 


Copy code 


var numeros = [1, 2, 3, 4, 5); 


Y M4 AS 


var frutas = ["manzanoa”, “pera”, “banana”; 
Declaración de variables: 


var: se utiliza para declarar una variable y se puede acceder desde cualquier 
parte del código. Por ejemplo: 


javascript 
Copy code 


let: se utiliza para declarar una variable que solo se puede acceder dentro del 
bloque en el que se declaró. Por ejemplo: 


javascript 
Copy code 
if (true) 

) 


console.log(y); // error: y no está definido 


const: se utiliza para declarar una variable constante que no se puede cambiar 
después de su declaración. Por ejemplo: 


javascript 
Copy code 
const Pl = 3.14; 


En conclusión, en JavaScript existen varios tipos de datos, desde los primitivos 
como números y cadenas de texto, hasta los complejos como objetos y arrays. 
Las variables se utilizan para almacenar estos datos y se declaran utilizando las 
palabras clave “var”, “let” o “const”. Es importante comprender los diferentes 
tipos de datos y cómo se utilizan las variables para almacenarlos para poder 
crear código efectivo y eficiente. 


En JavaScript, los operadores se utilizan para realizar operaciones matemáticas 
y lógicas en los valores y variables. A continuación, se detallan los tipos de 
operadores en JavaScript con ejemplos: 


Operadores aritméticos: 
Suma (+): se utiliza para sumar dos valores. Por ejemplo: 


javascript 


Resta (-): se utiliza para restar dos valores. Por ejemplo: 
javascript 
Copy code 
Multiplicación (*): se utiliza para multiplicar dos valores. Por ejemplo: 


javascript 


var resultado = x * y; // resultado es igual a 15 
División (/): se utiliza para dividir dos valores. Por ejemplo: 
javascript 


Copy code 


var y = 3; 
Módulo (%): se utiliza para obtener el resto de la división. Por ejemplo: 
javascript 


Copy code 


Operadores de asignación: 
Asignación (=): se utiliza para asignar un valor a una variable. Por ejemplo: 
javascript 
Copy code 


Asignación con suma (+=): se utiliza para sumar un valor a una variable y 
asignar el resultado a la misma variable. Por ejemplo: 


javascript 
Copy code 


Asignación con resta (-=): se utiliza para restar un valor a una variable y asignar 
el resultado a la misma variable. Por ejemplo: 


javascript 
Copy code 


Asignación con multiplicación (*=): se utiliza para multiplicar un valor a una 
variable y asignar el resultado a la misma variable. Por ejemplo: 


javascript 
Copy code 


Asignación con división (/=): se utiliza para dividir un valor a una variable y 
asignar el resultado a la misma variable. Por ejemplo: 


javascript 
Copy code 
Operadores de comparación: 


Igualdad (==): se utiliza para comparar si dos valores son iguales. Por ejemplo: 


javascript 
Copy code 


var resultado = x == y; // resultado es igual a true 


Desigualdad (!=): se utiliza para comparar si dos valores no son iguales. Por 
ejemplo: 


javascript 
Copy code 


var resultado = x != y; // resultado es igual a false 


Igualdad estricta (===): se utiliza para comparar si dos valores son iguales y del 
mismo tipo. Por ejemplo: 


javascript 
Copy code 


var resultado = x === y; // resultado es igual a false 


Desigualdad estricta (!==): se utiliza para comparar si dos valores no son 
iguales y del mismo tipo. Por ejemplo: 


javascript 


Copy code 


Supongamos que ahora queremos comprobar si una variable numero es 
estrictamente diferente de 10. Podemos utilizar el operador !== para esto, de la 
siguiente manera: 


javascript 


Copy code 


ifínumero !== 10) 


console.log(”El número es diferente de 10”); 


console.log(”El número es igual a 10”); 


En este caso, como la variable numero tiene el valor de 7, que es diferente de 
10, el programa imprimirá en la consola el mensaje “El número es diferente de 
10”. Si cambiamos el valor de numero a 10, el programa imprimirá en la 
consola el mensaje “El número es igual a 10”. 


Las estructuras de control son herramientas que nos permiten controlar el flujo 
de ejecución de un programa en JavaScript. Con ellas podemos tomar 
decisiones y realizar acciones repetitivas. A continuación, se describen las 
principales estructuras de control en JavaScript: 


Estructuras de decisión: 


Las estructuras de decisión nos permiten realizar diferentes acciones 
dependiendo de si se cumple o no una determinada condición. Las principales 
estructuras de decisión en JavaScript son: 


if: permite ejecutar un bloque de código si se cumple una condición 
determinada. Por ejemplo: 


javascript 
Copy code 
ifledad >= 18) 
) 


else: permite ejecutar un bloque de código si la condición del if no se cumple. 
Por ejemplo: 


javascript 
Copy code 
ifledad >= 18) 


console.log(“Eres menor de edad”); 


else if: permite evaluar una segunda condición si la primera no se cumple. Por 
ejemplo: 


javascript 

Copy code 

ifínota >= 9) 
console.log(“Sobresaliente”); 


else if(nota >= 7) 


console.log(“Notable”); 


else ifínota >= 5) 


console.log(“Aprobado”); 


console.log(”Suspenso”); 
Estructuras de repetición: 


Las estructuras de repetición nos permiten ejecutar un bloque de código varias 
veces. Las principales estructuras de repetición en JavaScript son: 


while: permite ejecutar un bloque de código mientras se cumpla una 
determinada condición. Por ejemplo: 


javascript 
Copy code 


let i=0; 


++; 
) 
do while: permite ejecutar un bloque de código al menos una vez, y luego 
repetirlo mientras se cumpla una determinada condición. Por ejemplo: 
javascript 
Copy code 
do | 


or: permite ejecutar un bloque de código un número determinado de veces. 
Por ejemplo 


lavascrip 

Copy code 
console.log(i); 
) 


Estructuras de salto: 


Las estructuras de salto nos permiten salir de una estructura de control o saltar 
a una parte específica del código. La principal estructura de salto en JavaScript 
es: 


break: permite salir de una estructura de control. Por ejemplo: 


javascript 
Copy code 
console. log(i); 


En este ejemplo, el programa imprimirá los números del 0 al 4, y luego saldrá 
del bucle. 


Estas son las principales estructuras de control en JavaScript. Con ellas 
podemos crear programas más complejos y completos. 


Las funciones son bloques de código que se pueden llamar varias veces en un 
programa para realizar una tarea específica. En JavaScript, las funciones se 
definen utilizando la palabra clave function. 


Para definir una función, se debe especificar un nombre para la función, 
seguido de los paréntesis que contienen los parámetros de la función (si los 
hay), y luego las llaves que contienen el cuerpo de la función. El siguiente es un 
ejemplo de una función simple que suma dos números: 


javascript 


Copy code 


unction sumar(a, b) 


En este ejemplo, la función sumar tiene dos parámetros a y b. Dentro del 
cuerpo de la función, se utiliza la palabra clave return para especificar el valor 
que debe devolver la función. 


Para llamar a una función, simplemente se utiliza su nombre seguido de los 
paréntesis que contienen los argumentos (si los hay) que se desean pasar a la 
función. El siguiente es un ejemplo de cómo se llama a la función sumar con los 
argumentos 2 y 3: 


javascript 
Copy code 


var resultado = sumar(2, 3); 


En este ejemplo, el resultado de la función sumar con los argumentos 2 y 3 se 
asigna a la variable resultado. 


En JavaScript, las funciones también se pueden asignar a variables y pasarse 
como argumentos a otras funciones. El siguiente es un ejemplo de cómo se 


define una función utilizando una variable y cómo se pasa una función como 
argumento a otra función: 


javascript 


Copy code 


var sumar = function(a, b) 


unction calcular(funcion, a, b) 
return funcion(a, b); 


var resultado = calcular(sumar, 2, 3); 


En este ejemplo, la función sumar se asigna a la variable sumar. La función 
calcular toma tres argumentos: una función (funcion), y dos números (a y b). La 
función calcular devuelve el resultado de llamar a la función funcion con los 
argumentos a y b. Finalmente, se llama a la función calcular con la función 
sumar y los argumentos 2 y 3, y el resultado se asigna a la variable resultado. 


En resumen, las funciones son una herramienta importante en JavaScript para 
realizar tareas específicas y se definen utilizando la palabra clave function. Las 
funciones se llaman utilizando su nombre seguido de los paréntesis que 
contienen los argumentos (si los hay), y pueden asignarse a variables y pasarse 
como argumentos a otras funciones. 


Los eventos en JavaScript son acciones o sucesos que ocurren en una página 

web y que pueden ser detectados y manejados por el código JavaScript. Los 

eventos son una forma de interactuar con los usuarios y hacer que la página 
web responda a sus acciones. 


Hay varios tipos de eventos en JavaScript, como los eventos del ratón, los 
eventos del teclado, los eventos de carga de la página, los eventos de cambio 
de estado, etc. Cada evento tiene un objeto de evento asociado que contiene 

información sobre el evento y los elementos HTML que lo desencadenaron. 


Para manejar un evento en JavaScript, se puede utilizar el método 
addEventListener() que se aplica a un objeto DOM y espera dos parámetros: el 
tipo de evento que se desea manejar y la función que se ejecutará cuando el 
evento ocurra. La función que se pasa como segundo parámetro se conoce 
como el controlador de eventos. 


A continuación se muestran algunos ejemplos de eventos en JavaScript: 


Evento de clic 


El evento de clic ocurre cuando el usuario hace clic en un elemento HTML, como 
un botón o un enlace. Para manejar este evento en JavaScript, se puede utilizar 
el siguiente código: 


html 


Copy code 


<button id="myButton”>Haz clic aqui</button> 


var myButton = document.getElementByld(“myButton”); 
alert(”¡Hiciste clic en el botón!”); 
J); 


En este ejemplo, se utiliza el método addEventListener() para detectar el evento 
de clic en el botón con el ID “myButton”. Cuando se hace clic en el botón, se 
ejecuta la función de alerta que muestra un mensaje en la pantalla. 


Evento de teclado 


El evento de teclado ocurre cuando el usuario presiona una tecla en el teclado. 
Para manejar este evento en JavaScript, se puede utilizar el siguiente código: 


html 
Copy code 


<input type="text” id="mylnput”> 


var mylnput = document.getElementByld(“mylnput”); 


mylnput.addEventListener(”"keydown”, function(event) 


if (event.key === “Enter”) 


alert(”Presionaste la tecla Enter”); 


1»; 


En este ejemplo, se utiliza el método addEventListener() para detectar el evento 
de teclado en el campo de entrada con el ID “mylnput”. Cuando se presiona la 
tecla Enter, se ejecuta la función de alerta que muestra un mensaje en la 
pantalla. 


Evento de carga de la página 


El evento de carga de la página ocurre cuando la página web se carga por 
completo. Para manejar este evento en JavaScript, se puede utilizar el siguiente 
código: 


html 


Copy code 


»); 


En este ejemplo, se utiliza el método addEventListener() para detectar el evento 
de carga de la página en el objeto window. Cuando la página se carga por 
completo, se ejecuta la función de alerta que muestra un mensaje en la 
pantalla. 


En resumen, los eventos en JavaScript son una herramienta poderosa para 
hacer que las páginas web sean interactivas y responder a las acciones de los 
usuarios. Al utilizar el método addEventListener(), se puede detectar y manejar 


diferentes tipos de eventos y hacer que la página web sea más dinámica y 
atractiva para los usuarios. 


La manipulación del DOM (Document Object Model) es una parte fundamental 
del desarrollo web. El DOM es la estructura de objetos que representa el 
documento HTML y define la forma en que los programas pueden acceder y 
manipular el contenido de una página web. 


En JavaScript, la manipulación del DOM se refiere a la capacidad de cambiar el 
contenido de una página web después de que se haya cargado. Esto puede 
incluir la modificación de elementos HTML, la adición o eliminación de 
elementos HTML, y la modificación de los estilos CSS. 


Existen varias formas de manipular el DOM con JavaScript, algunas de las 
cuales son: 


Selección de elementos: El primer paso para manipular el DOM es seleccionar 
los elementos que se van a modificar. Esto se puede hacer utilizando varios 
métodos, como getElementByld(), getElementsByClassName(), 
getElementsByTagName(), querySelector() y querySelectorAll(). Por ejemplo, 
para seleccionar el primer elemento con la clase “mi-clase”, se puede usar: 


javascript 


Copy code 


var elemento = document.querySelector(*.mi-clase”); 


Cambiar el contenido de los elementos: Una vez que se han seleccionado los 
elementos que se van a modificar, se puede cambiar su contenido utilizando la 
propiedad innerHTML. Por ejemplo, para cambiar el contenido de un elemento 

con el id “mi-elemento”, se puede usar: 


javascript 


Copy code 


document.getElementByld(“mi-elemento”).innerHTML = “Nuevo contenido”; 


Añadir y eliminar elementos: Es posible agregar nuevos elementos HTML a una 
página web utilizando el método createElement(), y luego agregarlos al DOM 
utilizando los métodos appendChild() o insertBefore(). Por ejemplo, para 
agregar un nuevo elemento div al final de un elemento con el id “mi-padre”, se 
puede usar: 


javascript 


Copy code 


var nuevoDiv = document.createElement('div”); 
document.getElementByld(“mi-padre”).appendChild(nuevoDiv); 


También es posible eliminar elementos del DOM utilizando el método 
removeChild(). Por ejemplo, para eliminar el primer hijo de un elemento con el 
id “mi-padre”, se puede usar: 


javascript 
Copy code 


var elementoAEliminar = document.getElementByld(“mi-padre?). firstChild; 


document.getElementByld(“mi-padre”).removeChild(elementoAEliminar); 


Modificar los estilos CSS: Es posible cambiar los estilos CSS de un elemento 
HTML utilizando la propiedad style. Por ejemplo, para cambiar el color de 
fondo de un elemento con el id “mi-elemento” a rojo, se puede usar: 


javascript 


Copy code 


document.getElementByld("mi-elemento”).style.backgroundColor = “red”; 


En resumen, la manipulación del DOM es una habilidad esencial para cualquier 
desarrollador web. Con ella se puede cambiar dinámicamente el contenido de 


una página web y crear una experiencia de usuario más interactiva y 
personalizada. 
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HTML5, CSS y JavaScript son tecnologías web fundamentales que se utilizan en 

conjunto para crear aplicaciones web interactivas y atractivas. Cada lenguaje 

tiene un papel específico en el desarrollo de aplicaciones web, y su integración 
es esencial para crear sitios web modernos y dinámicos. 


La forma más común de integrar HTML5, CSS y JavaScript es mediante la 
vinculación de archivos. Los archivos HTML contienen la estructura y el 
contenido de la página web, mientras que los archivos CSS definen el estilo y la 
apariencia visual. Por último, los archivos JavaScript proporcionan la 
interactividad y la funcionalidad en la página. 


Por ejemplo, en un archivo HTML se pueden vincular los archivos CSS y 
JavaScript de la siguiente manera: 


html 


Copy code 


<!DOCTYPE html> 


<meta charset="UTF-8”> 


<title>Mi sitio web</title> 


<link rel="stylesheet” type="text/css” href="estilos.css”> 


<script src="script.js”*></script> 


<h1>Bienvenidos a mi sitio web</h1> 


<p>Este es un ejemplo de cómo integrar HTML5, CSS y JavaScript.</p> 
</body> 


En este ejemplo, el archivo CSS se vincula a través de la etiqueta link dentro del 


elemento head, mientras que el archivo JavaScript se vincula a través de la 
etiqueta script al final del elemento head. De esta manera, el archivo CSS se 
carga antes de que se muestre la página web, y el archivo JavaScript se carga 
después de que se haya cargado todo el contenido HTML. 


Es importante tener en cuenta que cada archivo debe estar correctamente 
codificado y ubicado en la ruta correcta para que la integración funcione 
correctamente. Además, es esencial mantener un código limpio y organizado 
para evitar errores y problemas de compatibilidad entre los diferentes 
lenguajes. 


En resumen, la integración de HTML5, CSS y JavaScript es fundamental para 
crear aplicaciones web modernas y dinámicas. Mediante la vinculación de 
archivos, se pueden combinar las fortalezas de cada lenguaje para crear 
páginas web interactivas, atractivas y funcionales. 


“COLORES EN HTML5” 


= € HTML Colors 
Color | Color Name Hex Color Value RGB Color Value 
HEEE rgb(255, 255, 255) 
Silver | $COCOCO rgb(192, 192, 192) 
Gray 4808080 rgb(128, 128, 128) 
| 000000 rgb(0, O, 0) 
OOOO rgb(255, O, 0) 
++800000 rgb(128, O, 0) 


HHfFEFOO | rgb(255, 255, 0) 
808000 rgb(128, 128, 0) 
H00ff00 rgb(0, 255, 0) 
4008000 rgb(0, 128, 0) 
HOOFFF I rgb(0, 255, 255) 


++008080 rgb(0, 128, 128) 


= € HTML Colors 
| Navy 4000080 rgb(0, O, 128) 


Fuchsia HfOOF rgb(255, O, 255) 


Purple 800080 rgb(128, O, 128) 


HTML Color Picker 


Click the button below to pick a color. 


008080 


T— HTML Colors 


HATTFFF 


++808080 
*H000000O 
HffOOOO 
*+800000 
HAfffOO 
++808000 
HOOffOO 
+008000 
HOOfFfff 
+F+008080 
HOOOOff 
+000080 
HTffOOFf 


+800080 


Lo siento, como modelo de lenguaje, no puedo desarrollar un sitio web 
completo para usted. Sin embargo, puedo proporcionar una guía general sobre 
cómo crear un sitio web utilizando HTML5, CSS y Javascript. 


Planificación y diseño: 


Antes de comenzar a escribir código, es importante planificar y diseñar el sitio 
web. Esto puede incluir la creación de un mapa del sitio, bocetos de diseño y la 
selección de colores y fuentes. 


Estructura HTML: 


Una vez que se ha completado la planificación y el diseño, es hora de comenzar 
a escribir el código HTML. La estructura HTML debe incluir etiquetas 
semánticas que describan el contenido de la página. 


Estilo CSS: 


Después de escribir el código HTML, es hora de agregar estilo a la página web 
utilizando CSS. Esto incluye la selección de colores, fuentes y la creación de 
diseños de página responsivos. 


Interactividad con Javascript: 


Por último, se puede agregar interactividad a la página web utilizando 
Javascript. Esto puede incluir animaciones, efectos de desplazamiento, 
validación de formularios y otras características interactivas. 


Aquí hay un ejemplo básico de cómo se vería el código HTML, CSS y Javascript 
para una página web simple: 


HTML: 


php 
Copy code 
<html lang="en”> 


<p>Este es un sitio web básico creado con HTML, CSS y Javascript.</p> 


CSS: 


CSS 
Copy code 
font-family: Arial, sans-serif; 
) 


) 


padding: 0; 


list-style: none 


display: inline-block 
margin-right: 20px; 


) 
padding: 20px; 


) 


cursor: pointer; 


) 


Javascript: 


javascript 


Copy code 


const button = document.querySelector(*button”); 


button.addEventListener('click”, function() 


alert("Presionaste el botón”); 


Este es solo un ejemplo básico, pero puede expandirlo y agregar más 
características y funcionalidades según sea necesario. Recuerde siempre 
mantener una buena organización del código, utilizar etiquetas semánticas 


